TimePicker Time Picker

Rules

Basic Example

const rule = {
    type: "TimePicker",
    field: "section_time",
    title: "Activity Time",
    value: [],
    props: {
        isRange: true
    },
}

Props Configuration Examples

Single Time Selection

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

Time Range Selection

const rule = {
    type: "TimePicker",
    field: "timeRange",
    title: "Business Hours",
    value: ["09:00:00", "18:00:00"],
    props: {
        isRange: true,
        rangeSeparator: "to",
        startPlaceholder: "Start Time",
        endPlaceholder: "End Time",
        format: "HH:mm:ss",
        valueFormat: "HH:mm:ss",
    },
}

Arrow Control

const rule = {
    type: "TimePicker",
    field: "appointment",
    title: "Appointment Time",
    value: "14:30:00",
    props: {
        arrowControl: true,
        format: "HH:mm",
        valueFormat: "HH:mm",
    },
}

Disable Part of Time

const rule = {
    type: "TimePicker",
    field: "workTime",
    title: "Work Time",
    value: "09:00:00",
    props: {
        format: "HH:mm:ss",
        disabledHours: () => {
            // Disable 0-8 and 18-23 hours
            return [...Array(9).keys(), ...Array.from({length: 6}, (_, i) => i + 18)];
        },
        disabledMinutes: (hour) => {
            // Disable certain minutes in specific hours
            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: {
        placeholder: "Select time",
        format: "HH:mm:ss",
        clearable: true,
    },
    on: {
        change: (value) => {
            console.log('Time changed:', value);
        },
        blur: (event) => {
            console.log('Lost focus:', event);
        },
        focus: (event) => {
            console.log('Gained focus:', event);
        },
        clear: () => {
            console.log('Cleared time');
        },
        'visible-change': (visible) => {
            console.log('Dropdown visibility:', visible);
        },
    },
}

Full configuration: Element_TimePicker

value :Number | String

Props

Attribute Name	Description	Type	Default
readonly	Completely readonly	boolean	false
disabled	Disable	boolean	false
editable	Whether the text box can be edited	boolean	true
clearable	Whether to show clear button	boolean	true
size	Input box size	enum	—
placeholder	Placeholder content for non-range selection	string	''
startPlaceholder	Placeholder content for start date in range selection	string	—
endPlaceholder	Placeholder content for end date in range selection	string	—
isRange	Whether it is time range selection	boolean	false
arrowControl	Whether to use arrows for time selection	boolean	false
popperClass	Class name for TimePicker dropdown	string	''
rangeSeparator	Separator when selecting range	string	'-'
format	Format displayed in input box	string see date formats	—
defaultValue	Optional, default time displayed when picker opens	Date / object	—
valueFormat	Optional, format of bound value. If not specified, bound value is Date object	string Refer to date formats	—
id	Equivalent to native input id attribute	string / object	—
name	Equivalent to native input name attribute	string	''
ariaLabel	Equivalent to native input aria-label attribute	string	—
prefixIcon	Custom prefix icon	string / Component	Clock
clearIcon	Custom clear icon	string / Component	CircleClose
disabledHours	Disable selection of partial hour options	Function	—
disabledMinutes	Disable selection of partial minute options	Function	—
disabledSeconds	Disable selection of partial second options	Function	—
teleported	Whether to mirror popover dropdown list to body element	boolean	true
tabindex	Tabindex of input box	string / number	0
emptyValues	Empty value configuration for component Refer to config-provider	array	—
valueOnClear	Value when clearing options Refer to config-provider	string / number / boolean / Function	—
label	Equivalent to native input aria-label attribute	string	—

Events

Event Name	Description	Type
change	Triggered when user confirms selected value	Function
blur	Triggered when component Input loses focus	Function
focus	Triggered when component Input gains focus	Function
clear	Triggered when user clicks clear button in clearable mode	Function
visible-change	Triggered when TimePicker dropdown list appears/disappears	Function