TimeSelect Time Selection

Rules

Basic Example

const rule = {
    type: "elTimeSelect",
    field: "time",
    title: "Activity Time",
    value: [],
    props: {
        start:"08:30",
        step:"00:15",
        end:"18:30",
    },
}

Props Configuration Examples

Work Time Selection

const rule = {
    type: "elTimeSelect",
    field: "workTime",
    title: "Work Time",
    value: "09:00",
    props: {
        start: "09:00",
        end: "18:00",
        step: "00:30",
        placeholder: "Select time",
    },
}

Include End Time

const rule = {
    type: "elTimeSelect",
    field: "endTime",
    title: "End Time",
    value: "18:00",
    props: {
        start: "09:00",
        end: "18:00",
        step: "01:00",
        includeEndTime: true,
        placeholder: "Select end time",
    },
}

Limit Time Range

const rule = {
    type: "elTimeSelect",
    field: "appointment",
    title: "Appointment Time",
    value: "10:00",
    props: {
        start: "08:00",
        end: "20:00",
        step: "00:15",
        minTime: "09:00",
        maxTime: "18:00",
        placeholder: "Select appointment time",
    },
}

Events Examples

Listen to Time Changes

const rule = {
    type: "elTimeSelect",
    field: "time",
    title: "Activity Time",
    value: "09:00",
    props: {
        start: "08:00",
        end: "18:00",
        step: "00:30",
        placeholder: "Select time",
    },
    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');
        },
    },
}

Full configuration: Element_TimeSelect

value :String

Props

Attribute Name	Description	Type	Default Value
disabled	Disabled state	boolean	false
editable	Whether the text box can be edited	boolean	true
clearable	Whether to show clear button	boolean	true
includeEndTime	Whether to include end in options	boolean	false
size	Input box size	enum	default
placeholder	Placeholder content for non-range selection	string	—
name	Native attribute	string	—
effect	Tooltip theme. Built-in dark / light themes	string / enum	light
prefixIcon	Custom prefix icon	string / Component	Clock
clearIcon	Custom clear icon	string / Component	CircleClose
start	Start time	string	09:00
end	End time	string	18:00
step	Interval time	string	00:30
minTime	Earliest time point. Time periods earlier than this time will be disabled	string	—
maxTime	Latest time point. Time periods later than this time will be disabled	string	—
format	Set time format	string see formats	HH:mm
emptyValues	Empty value configuration for component Refer to config-provider	array	—
valueOnClear	Value when clearing options Refer to config-provider	string / number / boolean / Function	—

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 single selection mode	Function