diff --git a/frontend/src/components/Calendar/CalendarEventPanel.vue b/frontend/src/components/Calendar/CalendarEventPanel.vue
index 6c9c7828..838234bb 100644
--- a/frontend/src/components/Calendar/CalendarEventPanel.vue
+++ b/frontend/src/components/Calendar/CalendarEventPanel.vue
@@ -200,8 +200,9 @@
             :class="['[&_input]:w-[216px]']"
             variant="outline"
             :value="_event.fromDate"
-            :formatter="(date) => getFormat(date, 'MMM D, YYYY')"
+            :format="'MMM D, YYYY'"
             :placeholder="__('May 1, 2025')"
+            :clearable="false"
             @update:modelValue="(date) => updateDate(date, true)"
           >
             <template #suffix="{ togglePopover }">
@@ -351,7 +352,7 @@ import DescriptionIcon from '@/components/Icons/DescriptionIcon.vue'
 import TimePicker from '@/components/Calendar/TimePicker.vue'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
-import { getFormat, validateEmail } from '@/utils'
+import { validateEmail } from '@/utils'
 import { allTimeSlots } from '@/components/Calendar/utils'
 import {
   TextInput,
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 78a4f403..1528a242 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -183,7 +183,7 @@
                     :value="row[field.fieldname]"
                     icon-left=""
                     variant="outline"
-                    :formatter="(date) => getFormat(date, '', true)"
+                    :format="getFormat('', '', true, false, false)"
                     input-class="border-none text-sm text-ink-gray-8"
                     @change="(v) => fieldChange(v, field, row)"
                   />
diff --git a/frontend/src/components/FieldLayout/Field.vue b/frontend/src/components/FieldLayout/Field.vue
index e042a7a1..d3c9411b 100644
--- a/frontend/src/components/FieldLayout/Field.vue
+++ b/frontend/src/components/FieldLayout/Field.vue
@@ -141,7 +141,7 @@
     <DatePicker
       v-else-if="field.fieldtype === 'Date'"
       :value="data[field.fieldname]"
-      :formatter="(date) => getFormat(date, '', true)"
+      :format="getFormat('', '', true, false, false)"
       :placeholder="getPlaceholder(field)"
       input-class="border-none"
       @change="(v) => fieldChange(v, field)"
diff --git a/frontend/src/components/Modals/EventModal.vue b/frontend/src/components/Modals/EventModal.vue
index fa54524d..aa84b41a 100644
--- a/frontend/src/components/Modals/EventModal.vue
+++ b/frontend/src/components/Modals/EventModal.vue
@@ -68,8 +68,9 @@
               :class="[_event.isFullDay ? 'w-full' : 'w-[158px]']"
               variant="outline"
               :value="_event.fromDate"
-              :formatter="(date) => getFormat(date, 'MMM D, YYYY')"
+              :format="'MMM D, YYYY'"
               :placeholder="__('May 1, 2025')"
+              :clearable="false"
               @update:modelValue="(date) => updateDate(date, true)"
             >
               <template #suffix="{ togglePopover }">
@@ -160,7 +161,6 @@ import {
   dayjs,
 } from 'frappe-ui'
 import { globalStore } from '@/stores/global'
-import { getFormat } from '@/utils'
 import { onMounted, ref, computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index 97dd7d10..bc475cc4 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -252,7 +252,7 @@
                           <DatePicker
                             icon-left=""
                             :value="doc[field.fieldname]"
-                            :formatter="(date) => getFormat(date, '', true)"
+                            :format="getFormat('', '', true, false, false)"
                             :placeholder="field.placeholder"
                             placement="left-start"
                             :hideIcon="true"
diff --git a/frontend/src/pages/Calendar.vue b/frontend/src/pages/Calendar.vue
index 7f1e5136..d89ea754 100644
--- a/frontend/src/pages/Calendar.vue
+++ b/frontend/src/pages/Calendar.vue
@@ -52,11 +52,21 @@
           <!-- left side  -->
           <!-- Month Year -->
           <div class="flex items-center">
-            <DateMonthYearPicker
+            <DatePicker
               :modelValue="selectedMonthDate"
-              :formatter="() => currentMonthYear"
               @update:modelValue="(val) => onMonthYearChange(val)"
-            />
+              :clearable="false"
+            >
+              <template #target="{ togglePopover }">
+                <Button
+                  variant="ghost"
+                  class="text-lg font-medium text-ink-gray-7"
+                  :label="currentMonthYear"
+                  iconRight="chevron-down"
+                  @click="togglePopover"
+                />
+              </template>
+            </DatePicker>
           </div>
           <!-- right side -->
           <!-- actions buttons for calendar -->
@@ -125,7 +135,7 @@ import {
   createListResource,
   TabButtons,
   dayjs,
-  DateMonthYearPicker,
+  DatePicker,
   CalendarActiveEvent as activeEvent,
   call,
 } from 'frappe-ui'