TimePicker

Rules

Basic Example

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

Props Configuration Examples

Custom Format

const rule = {
    type: "TimePicker",
    field: "time",
    title: "Select Time",
    value: null,
    props: {
        format: "HH:mm:ss",
        placeholder: "Select time",
        clearable: true,
    }
}

12-Hour Format

const rule = {
    type: "TimePicker",
    field: "time",
    title: "Select Time",
    value: null,
    props: {
        use12Hours: true,
        format: "hh:mm:ss a",
        placeholder: "Select time",
    }
}

Limit Time Range

const rule = {
    type: "TimePicker",
    field: "workTime",
    title: "Work Time",
    value: null,
    props: {
        format: "HH:mm",
        placeholder: "Select time",
        hours: [9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        minutes: [0, 15, 30, 45],
    }
}

Disable Specific Times

const rule = {
    type: "TimePicker",
    field: "time",
    title: "Select Time",
    value: null,
    props: {
        format: "HH:mm:ss",
        placeholder: "Select time",
        isHourDisabled: (hour) => hour < 9 || hour > 18,
        isMinuteDisabled: (minute, hour) => {
            if (hour === 12) {
                return minute < 30;
            }
            return false;
        },
    }
}

Events Examples

Handle Time Changes

const rule = {
    type: "TimePicker",
    field: "time",
    title: "Select Time",
    value: null,
    props: {
        format: "HH:mm:ss",
        placeholder: "Select time",
        clearable: true,
    },
    on: {
        'update:value': (value, formattedValue) => {
            console.log('Time changed:', value, formattedValue);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
    },
}

Linkage Update After Time Selection

const rule = [
    {
        type: "TimePicker",
        field: "startTime",
        title: "Start Time",
        value: null,
        props: {
            format: "HH:mm",
            placeholder: "Select start time",
        },
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // Set end time to start time + 2 hours
                if (value) {
                    const endTime = value + 2 * 60 * 60 * 1000;
                    $inject.api.setValue('endTime', endTime);
                }
            },
        },
    },
    {
        type: "TimePicker",
        field: "endTime",
        title: "End Time",
        value: null,
        props: {
            format: "HH:mm",
            placeholder: "Select end time",
        },
    },
]

Complete configuration items: naive-ui_TimePicker

value :Number | String

Props

Name	Type	Default Value	Description	Version
actions	Array<'now' | 'confirm'> | null	['now', 'confirm']	Supported operations in Time Picker
clearable	boolean	false	Whether it can be cleared
disabled	boolean	false	Whether disabled
format	string	'HH:mm:ss'	Time format string, see format for details
formatted-value	string | null	undefined	Formatted value	2.24.0
hours	number | number[]	undefined	Specify displayed hours through array. When value is number, it will be treated as time step
minutes	number | number[]	undefined	Specify displayed minutes through array. When value is number, it will be treated as time step
seconds	number | number[]	undefined	Specify displayed seconds through array. When value is number, it will be treated as time step
input-readonly	boolean	false	Set input box to readonly (avoid opening virtual keyboard on mobile devices)
is-hour-disabled	(hour: number) => boolean	() => false	Callback function for disabling hours
is-minute-disabled	(minute: number, hour: number) => boolean	() => false	Callback function for disabling minutes
is-second-disabled	(second: number, minute: number, hour: number) => boolean	() => false	Callback function for disabling seconds
placeholder	string	'Select Time'	Placeholder for select box
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'	Popup position of Time Picker panel	2.25.0
size	'small' | 'medium' | 'large'	'medium'	Size of select box
use-12-hours	boolean	false	Whether to use 12-hour format panel
value-format	string	Follows format	Format of formatted value	2.24.0
on-blur	() => void	undefined	Callback when select box loses focus
on-focus	() => void	undefined	Callback when select box gains focus
on-update:formatted-value	(value: number | null, timestampValue: number | null) => void	undefined	Callback when formatted value changes	2.24.0
on-update:value	(value: number | null, formattedValue: string | null) => void	undefined	Callback when value changes	formattedValue 2.24.0