TimePicker

Rules

Basic Example

const rule = {
    type: "TimePicker",
    field: "section_time",
    title: "Event 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",
        allowClear: 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",
    }
}

Time Range Selection

const rule = {
    type: "TimePicker",
    field: "timeRange",
    title: "Time Range",
    value: null,
    props: {
        type: "time-range",
        format: "HH:mm:ss",
        placeholder: ["Start Time", "End Time"],
        allowClear: true,
    }
}

Limit Time Range

const rule = {
    type: "TimePicker",
    field: "workTime",
    title: "Work Time",
    value: null,
    props: {
        format: "HH:mm",
        placeholder: "Select time",
        step: { hour: 1, minute: 15 },
        disabledHours: () => {
            const hours = [];
            for (let i = 0; i < 9; i++) hours.push(i);
            for (let i = 19; i < 24; i++) hours.push(i);
            return hours;
        },
    }
}

Events Examples

Listen to Time Changes

const rule = {
    type: "TimePicker",
    field: "time",
    title: "Select Time",
    value: null,
    props: {
        format: "HH:mm:ss",
        placeholder: "Select time",
        allowClear: true,
    },
    on: {
        change: (timeString, time) => {
            console.log('Time changed:', timeString, time);
        },
        clear: () => {
            console.log('Time cleared');
        },
    },
}

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: {
            change: ($inject, timeString, time) => {
                // Set end time to start time + 2 hours
                if (time) {
                    const endTime = new Date(time);
                    endTime.setHours(endTime.getHours() + 2);
                    $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: arco-design_TimePicker

value: Number | String

Props

Parameter	Description	Type	Default
type	Selector type	'time' | 'time-range'	'time'
disabled	Whether disabled	boolean	false
allow-clear	Whether to allow clear	boolean	true
readonly	Whether in readonly mode	boolean	false
error	Whether in error state	boolean	false
format	Format for displaying time, refer to String Parsing Format	string	'HH:mm:ss'
placeholder	Placeholder text	string	-
size	Input box size	'mini' | 'small' | 'medium' | 'large'	'medium'
popup-container	Mount container for popup	string | HTMLElement	-
use12-hours	12-hour format	boolean	false
step	Set selection interval for hour / minute / second	{ hour?: number; minute?: number; second?: number;}	-
disabled-hours	Disabled hour options	() => number[]	-
disabled-minutes	Disabled minute options	(selectedHour?: number) => number[]	-
disabled-seconds	Disabled second options	(selectedHour?: number, selectedMinute?: number) => number[]	-
hide-disabled-options	Hide disabled options	boolean	false
disable-confirm	Disable confirmation step, when enabled, selecting time directly doesn't require clicking confirm button	boolean	false
position	Popup position	'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br'	'bl'
popup-visible	Control popup open or close	boolean	-
default-popup-visible	Popup default open or close	boolean	false
trigger-props	Parameters that can be passed to Trigger component	Record<string, unknown>	-
unmount-on-close	Whether to destroy DOM structure after closing	boolean	false

Events

Event Name	Description	Parameters
change	Triggered when component value changes	timeString: string | Array<string | undefined> | undefined time: date | Array<date | undefined> | undefined
select	Triggered when time is selected but component value doesn't change	timeString: string | Array<string | undefined> time: Date | Array<Date | undefined>
clear	Triggered when clear button is clicked	-
popup-visible-change	Triggered when popup expands or collapses	visible: boolean

String Parsing Format

Format	Output	Description
YY	21	Two-digit year
YYYY	2021	Four-digit year
M	1-12	Month, starting from 1
MM	01-12	Month, two digits
MMM	Jan-Dec	Abbreviated month name
MMMM	January-December	Full month name
D	1-31	Day of month
DD	01-31	Day of month, two digits
d	0-6	Day of week, Sunday is 0
dd	Su-Sa	Shortest day name of week
ddd	Sun-Sat	Abbreviated day name of week
dddd	Sunday-Saturday	Full day name of week
H	0-23	Hour
HH	00-23	Hour, two digits
h	1-12	Hour, 12-hour format
hh	01-12	Hour, 12-hour format, two digits
m	0-59	Minute
mm	00-59	Minute, two digits
s	0-59	Second
ss	00-59	Second, two digits
S	0-9	Hundreds of milliseconds, one digit
SS	00-99	Tens of milliseconds, two digits
SSS	000-999	Milliseconds, three digits
Z	-5:00	UTC offset
ZZ	-0500	UTC offset with leading zero
A	AM PM	-
a	am pm	-
Do	1st... 3st	Day of month with ordinal
X	1410715640.579	Unix timestamp
x	1410715640579	Unix timestamp in milliseconds