From 576e356e9d9920aae28288c11f1720b4a999965e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Dec 2024 12:42:38 +0530
Subject: [PATCH] fix: added formatter in all DatePicker & DateTimePicker

---
 frontend/src/components/Fields.vue           | 3 +++
 frontend/src/components/Modals/TaskModal.vue | 3 ++-
 frontend/src/components/SectionFields.vue    | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index cc39778c..bb5e0125 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -134,6 +134,7 @@
               v-else-if="field.type === 'Datetime'"
               v-model="data[field.name]"
               icon-left=""
+              :formatter="(date) => getFormat(date, '', true, true)"
               :placeholder="getPlaceholder(field)"
               input-class="border-none"
             />
@@ -141,6 +142,7 @@
               v-else-if="field.type === 'Date'"
               icon-left=""
               v-model="data[field.name]"
+              :formatter="(date) => getFormat(date, '', true)"
               :placeholder="getPlaceholder(field)"
               input-class="border-none"
             />
@@ -178,6 +180,7 @@ import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
+import { getFormat } from '@/utils'
 import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
 
 const { getUser } = usersStore()
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 5c98e679..2c85c237 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -93,6 +93,7 @@
             class="datepicker w-36"
             v-model="_task.due_date"
             :placeholder="__('01/04/2024 11:30 PM')"
+            :formatter="(date) => getFormat(date, '', true, true)"
             input-class="border-none"
           />
           <Dropdown :options="taskPriorityOptions(updateTaskPriority)">
@@ -114,7 +115,7 @@ import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
-import { taskStatusOptions, taskPriorityOptions } from '@/utils'
+import { taskStatusOptions, taskPriorityOptions, getFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
 import { TextEditor, Dropdown, Tooltip, call, DateTimePicker } from 'frappe-ui'
diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index 3233ff94..e18d65fc 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -152,6 +152,7 @@
             <DateTimePicker
               icon-left=""
               :value="data[field.name]"
+              :formatter="(date) => getFormat(date, '', true, true)"
               :placeholder="field.placeholder"
               placement="left-start"
               @change="(data) => emit('update', field.name, data)"
@@ -161,6 +162,7 @@
             <DatePicker
               icon-left=""
               :value="data[field.name]"
+              :formatter="(date) => getFormat(date, '', true)"
               :placeholder="field.placeholder"
               placement="left-start"
               @change="(data) => emit('update', field.name, data)"
@@ -202,6 +204,7 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { usersStore } from '@/stores/users'
+import { getFormat } from '@/utils'
 import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
 import { computed } from 'vue'