From 2b0c43677e660a60d041787c842144e0f5acbc72 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 3 Sep 2025 23:09:18 +0530
Subject: [PATCH] fix: add TimePicker component support for Time fieldtype in
 Grid and Field components

---
 frontend/src/components/Controls/Grid.vue     | 13 ++++++---
 frontend/src/components/FieldLayout/Field.vue | 12 +++++++--
 frontend/src/components/SidePanelLayout.vue   | 27 +++++++++++++------
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 1528a242..92325ef7 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -178,10 +178,17 @@
                       @change="(e) => fieldChange(e.target.checked, field, row)"
                     />
                   </div>
+                  <TimePicker
+                    v-else-if="field.fieldtype === 'Time'"
+                    :value="row[field.fieldname]"
+                    variant="outline"
+                    :format="getFormat('', '', false, true, false)"
+                    input-class="border-none text-sm text-ink-gray-8"
+                    @change="(v) => fieldChange(v, field, row)"
+                  />
                   <DatePicker
                     v-else-if="field.fieldtype === 'Date'"
                     :value="row[field.fieldname]"
-                    icon-left=""
                     variant="outline"
                     :format="getFormat('', '', true, false, false)"
                     input-class="border-none text-sm text-ink-gray-8"
@@ -190,9 +197,8 @@
                   <DateTimePicker
                     v-else-if="field.fieldtype === 'Datetime'"
                     :value="row[field.fieldname]"
-                    icon-left=""
                     variant="outline"
-                    :formatter="(date) => getFormat(date, '', true, true)"
+                    :format="getFormat('', '', true, true, false)"
                     input-class="border-none text-sm text-ink-gray-8"
                     @change="(v) => fieldChange(v, field, row)"
                   />
@@ -349,6 +355,7 @@ import { createDocument } from '@/composables/document'
 import {
   FormControl,
   Checkbox,
+  TimePicker,
   DateTimePicker,
   DatePicker,
   Tooltip,
diff --git a/frontend/src/components/FieldLayout/Field.vue b/frontend/src/components/FieldLayout/Field.vue
index d3c9411b..12dac660 100644
--- a/frontend/src/components/FieldLayout/Field.vue
+++ b/frontend/src/components/FieldLayout/Field.vue
@@ -130,10 +130,18 @@
         </Tooltip>
       </template>
     </Link>
+    <TimePicker
+      v-else-if="field.fieldtype === 'Time'"
+      :value="data[field.fieldname]"
+      :format="getFormat('', '', false, true, false)"
+      :placeholder="getPlaceholder(field)"
+      input-class="border-none"
+      @change="(v) => fieldChange(v, field)"
+    />
     <DateTimePicker
       v-else-if="field.fieldtype === 'Datetime'"
       :value="data[field.fieldname]"
-      :formatter="(date) => getFormat(date, '', true, true)"
+      :format="getFormat('', '', true, true, false)"
       :placeholder="getPlaceholder(field)"
       input-class="border-none"
       @change="(v) => fieldChange(v, field)"
@@ -225,7 +233,7 @@ import { flt } from '@/utils/numberFormat.js'
 import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { useDocument } from '@/data/document'
-import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
+import { Tooltip, DatePicker, DateTimePicker, TimePicker } from 'frappe-ui'
 import { computed, provide, inject } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index bc475cc4..5f7d96f7 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -229,19 +229,26 @@
                           @change="(v) => fieldChange(v, field)"
                           :onCreate="field.create"
                         />
+                        <div
+                          v-else-if="field.fieldtype === 'Time'"
+                          class="form-control"
+                        >
+                          <TimePicker
+                            :value="doc[field.fieldname]"
+                            :format="getFormat('', '', false, true, false)"
+                            :placeholder="field.placeholder"
+                            @change="(v) => fieldChange(v, field)"
+                          />
+                        </div>
                         <div
                           v-else-if="field.fieldtype === 'Datetime'"
                           class="form-control"
                         >
                           <DateTimePicker
-                            icon-left=""
                             :value="doc[field.fieldname]"
-                            :formatter="
-                              (date) => getFormat(date, '', true, true)
-                            "
+                            :format="getFormat('', '', true, true, false)"
                             :placeholder="field.placeholder"
                             placement="left-start"
-                            :hideIcon="true"
                             @change="(v) => fieldChange(v, field)"
                           />
                         </div>
@@ -250,12 +257,10 @@
                           class="form-control"
                         >
                           <DatePicker
-                            icon-left=""
                             :value="doc[field.fieldname]"
                             :format="getFormat('', '', true, false, false)"
                             :placeholder="field.placeholder"
                             placement="left-start"
-                            :hideIcon="true"
                             @change="(v) => fieldChange(v, field)"
                           />
                         </div>
@@ -378,7 +383,13 @@ import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
 import { getFormat, evaluateDependsOnValue } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'
-import { Tooltip, DateTimePicker, DatePicker, Popover } from 'frappe-ui'
+import {
+  Tooltip,
+  DateTimePicker,
+  DatePicker,
+  TimePicker,
+  Popover,
+} from 'frappe-ui'
 import { useDocument } from '@/data/document'
 import { ref, computed, getCurrentInstance } from 'vue'