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)" @change="(e) => fieldChange(e.target.checked, field, row)"
/> />
</div> </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 <DatePicker
v-else-if="field.fieldtype === 'Date'" v-else-if="field.fieldtype === 'Date'"
:value="row[field.fieldname]" :value="row[field.fieldname]"
icon-left=""
variant="outline" variant="outline"
:format="getFormat('', '', true, false, false)" :format="getFormat('', '', true, false, false)"
input-class="border-none text-sm text-ink-gray-8" input-class="border-none text-sm text-ink-gray-8"
@ -190,9 +197,8 @@
<DateTimePicker <DateTimePicker
v-else-if="field.fieldtype === 'Datetime'" v-else-if="field.fieldtype === 'Datetime'"
:value="row[field.fieldname]" :value="row[field.fieldname]"
icon-left=""
variant="outline" variant="outline"
:formatter="(date) => getFormat(date, '', true, true)" :format="getFormat('', '', true, true, false)"
input-class="border-none text-sm text-ink-gray-8" input-class="border-none text-sm text-ink-gray-8"
@change="(v) => fieldChange(v, field, row)" @change="(v) => fieldChange(v, field, row)"
/> />
@ -349,6 +355,7 @@ import { createDocument } from '@/composables/document'
import { import {
FormControl, FormControl,
Checkbox, Checkbox,
TimePicker,
DateTimePicker, DateTimePicker,
DatePicker, DatePicker,
Tooltip, Tooltip,

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

@ -130,10 +130,18 @@
</Tooltip> </Tooltip>
</template> </template>
</Link> </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 <DateTimePicker
v-else-if="field.fieldtype === 'Datetime'" v-else-if="field.fieldtype === 'Datetime'"
:value="data[field.fieldname]" :value="data[field.fieldname]"
:formatter="(date) => getFormat(date, '', true, true)" :format="getFormat('', '', true, true, false)"
:placeholder="getPlaceholder(field)" :placeholder="getPlaceholder(field)"
input-class="border-none" input-class="border-none"
@change="(v) => fieldChange(v, field)" @change="(v) => fieldChange(v, field)"
@ -225,7 +233,7 @@ import { flt } from '@/utils/numberFormat.js'
import { getMeta } from '@/stores/meta' import { getMeta } from '@/stores/meta'
import { usersStore } from '@/stores/users' import { usersStore } from '@/stores/users'
import { useDocument } from '@/data/document' 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' import { computed, provide, inject } from 'vue'
const props = defineProps({ const props = defineProps({

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

@ -229,19 +229,26 @@
@change="(v) => fieldChange(v, field)" @change="(v) => fieldChange(v, field)"
:onCreate="field.create" :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 <div
v-else-if="field.fieldtype === 'Datetime'" v-else-if="field.fieldtype === 'Datetime'"
class="form-control" class="form-control"
> >
<DateTimePicker <DateTimePicker
icon-left=""
:value="doc[field.fieldname]" :value="doc[field.fieldname]"
:formatter=" :format="getFormat('', '', true, true, false)"
(date) => getFormat(date, '', true, true)
"
:placeholder="field.placeholder" :placeholder="field.placeholder"
placement="left-start" placement="left-start"
:hideIcon="true"
@change="(v) => fieldChange(v, field)" @change="(v) => fieldChange(v, field)"
/> />
</div> </div>
@ -250,12 +257,10 @@
class="form-control" class="form-control"
> >
<DatePicker <DatePicker
icon-left=""
:value="doc[field.fieldname]" :value="doc[field.fieldname]"
:format="getFormat('', '', true, false, false)" :format="getFormat('', '', true, false, false)"
:placeholder="field.placeholder" :placeholder="field.placeholder"
placement="left-start" placement="left-start"
:hideIcon="true"
@change="(v) => fieldChange(v, field)" @change="(v) => fieldChange(v, field)"
/> />
</div> </div>
@ -378,7 +383,13 @@ import { usersStore } from '@/stores/users'
import { isMobileView } from '@/composables/settings' import { isMobileView } from '@/composables/settings'
import { getFormat, evaluateDependsOnValue } from '@/utils' import { getFormat, evaluateDependsOnValue } from '@/utils'
import { flt } from '@/utils/numberFormat.js' 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 { useDocument } from '@/data/document'
import { ref, computed, getCurrentInstance } from 'vue' import { ref, computed, getCurrentInstance } from 'vue'