test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add TimePicker component support for Time fieldtype in Grid and Field components

Browse Source
This commit is contained in:
Shariq Ansari 2025-09-03 23:09:18 +05:30
parent c51ee63008
commit 2b0c43677e
3 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/Controls/Grid.vue
View File

@ -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,

12
frontend/src/components/FieldLayout/Field.vue
View File

@ -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({

27
frontend/src/components/SidePanelLayout.vue
View File

@ -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'