TimeSelect 时间选择

规则

基础示例

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

Props 配置示例

工作时间选择

const rule = {
    type: "elTimeSelect",
    field: "workTime",
    title: "工作时间",
    value: "09:00",
    props: {
        start: "09:00",
        end: "18:00",
        step: "00:30",
        placeholder: "请选择时间",
    },
}

包含结束时间

const rule = {
    type: "elTimeSelect",
    field: "endTime",
    title: "结束时间",
    value: "18:00",
    props: {
        start: "09:00",
        end: "18:00",
        step: "01:00",
        includeEndTime: true,
        placeholder: "请选择结束时间",
    },
}

限制时间范围

const rule = {
    type: "elTimeSelect",
    field: "appointment",
    title: "预约时间",
    value: "10:00",
    props: {
        start: "08:00",
        end: "20:00",
        step: "00:15",
        minTime: "09:00",
        maxTime: "18:00",
        placeholder: "请选择预约时间",
    },
}

Events 事件示例

监听时间变化

const rule = {
    type: "elTimeSelect",
    field: "time",
    title: "活动时间",
    value: "09:00",
    props: {
        start: "08:00",
        end: "18:00",
        step: "00:30",
        placeholder: "请选择时间",
    },
    on: {
        change: (value) => {
            console.log('时间改变:', value);
        },
        blur: (event) => {
            console.log('失去焦点:', event);
        },
        focus: (event) => {
            console.log('获得焦点:', event);
        },
        clear: () => {
            console.log('清空时间');
        },
    },
}

完整配置项:Element_TimeSelect

value :String

Props

属性名	说明	类型	默认值
disabled	禁用状态	boolean	false
editable	文本框可输入	boolean	true
clearable	是否显示清除按钮	boolean	true
includeEndTime	是否在选项中包含end	boolean	false
size	输入框尺寸	enum	default
placeholder	非范围选择时的占位内容	string	—
name	原生属性	string	—
effect	Tooltip 主题，内置了 dark / light 两种主题	string / enum	light
prefixIcon	自定义前缀图标	string / Component	Clock
clearIcon	自定义清除图标	string / Component	CircleClose
start	开始时间	string	09:00
end	结束时间	string	18:00
step	间隔时间	string	00:30
minTime	最早时间点，早于该时间的时间段将被禁用	string	—
maxTime	最晚时间点，晚于该时间的时间段将被禁用	string	—
format	设置时间格式	string see formats	HH:mm
emptyValues	组件的空值配置 参考config-provider	array	—
valueOnClear	清空选项的值 参考 config-provider	string / number / boolean / Function	—

Events

事件名	说明	类型
change	用户确认选定的值时触发	Function
blur	在组件 Input 失去焦点时触发	Function
focus	在组件 Input 获得焦点时触发	Function
clear	可清空的单选模式下用户点击清空按钮时触发	Function