TimePicker

Rules

Basic Example

const rule = {
    type: "TimePicker",
    field: "section_time",
    title: "Activity Time",
    value: ''
}

Props Configuration Examples

Time Range Selection

const rule = {
    type: "TimePicker",
    field: "timeRange",
    title: "Business Hours",
    value: [],
    props: {
        format: "HH:mm:ss",
        placeholder: ["Start Time", "End Time"],
    },
}

Disable Partial Time

const rule = {
    type: "TimePicker",
    field: "workTime",
    title: "Work Time",
    value: "09:00:00",
    props: {
        format: "HH:mm:ss",
        disabledTime: () => {
            return {
                disabledHours: () => [...Array(9).keys(), ...Array.from({length: 6}, (_, i) => i + 18)],
                disabledMinutes: (hour) => {
                    if (hour === 12) {
                        return [0, 30];
                    }
                    return [];
                },
            };
        },
    },
}

Events Examples

Listen to Time Changes

const rule = {
    type: "TimePicker",
    field: "startTime",
    title: "Start Time",
    value: "09:00:00",
    props: {
        format: "HH:mm:ss",
        placeholder: "Select time",
    },
    on: {
        change: (time, timeString) => {
            console.log('Time changed:', time, timeString);
        },
    },
}

Reference: Ant-design-vue_TimePicker

value :Number | String

Props

Parameter	Description	Type	Default
allowClear	Whether to show clear button	boolean	true
autofocus	Auto focus	boolean	false
bordered	Whether to have border	boolean	true
clearIcon	Custom clear icon	v-slot:clearIcon	-
clearText	Tooltip text for clear button	string	clear
disabled	Disable all operations	boolean	false
disabledTime	Time that cannot be selected	DisabledTime	-
format	Display time format	string	HH:mm:ss
getPopupContainer	Define popup container, default creates new div on body	function(trigger)	-
hideDisabledOptions	Hide disabled options	boolean	false
hourStep	Hour option interval	number	1
inputReadOnly	Set input box to read-only (avoid opening virtual keyboard on mobile devices)	boolean	false
minuteStep	Minute option interval	number	1
open	Whether panel is open	boolean	false
placeholder	Content displayed when there is no value	string | [string, string]	Select time
placement	Position where selector pops up	bottomLeft bottomRight topLeft topRight	bottomLeft
popupClassName	Popup class name	string	-
popupStyle	Popup style object	object	-
renderExtraFooter	Custom content displayed at bottom of selector	v-slot:renderExtraFooter	-
secondStep	Second option interval	number	1
showNow	Whether panel displays "Now" button	boolean	-
status	Set validation status	'error' | 'warning'	-
suffixIcon	Custom suffix icon for selector	v-slot:suffixIcon	-
use12Hours	Use 12-hour format, when true format defaults to h:mm:ss a	boolean	false
valueFormat	Optional, format of bound value, affects value, defaultValue. If not specified, bound value is dayjs object	string, Specific format	-

DisabledTime

type DisabledTime = (now: Dayjs) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

Events

Event Name	Description	Callback Parameters
change	Callback when time changes	function(time: dayjs | string, timeString: string): void
openChange	Callback when panel opens/closes	(open: boolean): void

TimeRangePicker

Properties are the same as DatePicker's RangePicker. Also includes the following properties:

Parameter	Description	Type	Default
order	Whether start and end time are automatically sorted	boolean	true
disabledTime	Time that cannot be selected	RangeDisabledTime	-

RangeDisabledTime

type RangeDisabledTime = (
  now: Dayjs,
  type = 'start' | 'end',
) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};