TimePicker 时间选择器

规则

基础示例

const rule = {
    type: "TimePicker",
    field: "section_time",
    title: "活动时间",
    value: ''
}

Props 配置示例

自定义格式

const rule = {
    type: "TimePicker",
    field: "time",
    title: "选择时间",
    value: null,
    props: {
        format: "HH:mm:ss",
        placeholder: "请选择时间",
        clearable: true,
    }
}

时间范围选择

const rule = {
    type: "TimePicker",
    field: "timeRange",
    title: "时间范围",
    value: null,
    props: {
        format: "HH:mm:ss",
        placeholder: ["开始时间", "结束时间"],
        clearable: true,
        enableTimePicker: true,
    }
}

Events 事件示例

监听时间变化

const rule = {
    type: "TimePicker",
    field: "time",
    title: "选择时间",
    value: null,
    props: {
        format: "HH:mm:ss",
        placeholder: "请选择时间",
        clearable: true,
    },
    on: {
        change: (value) => {
            console.log('时间改变:', value);
        },
        clear: () => {
            console.log('清空时间');
        },
    },
}

时间选择后联动更新

const rule = [
    {
        type: "TimePicker",
        field: "startTime",
        title: "开始时间",
        value: null,
        props: {
            format: "HH:mm",
            placeholder: "请选择开始时间",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 开始时间改变时，自动设置结束时间（开始时间+2小时）
                if (value) {
                    const time = new Date('2000-01-01 ' + value);
                    time.setHours(time.getHours() + 2);
                    const endTime = time.toTimeString().slice(0, 5);
                    $inject.api.setValue('endTime', endTime);
                }
            },
        },
    },
    {
        type: "TimePicker",
        field: "endTime",
        title: "结束时间",
        value: null,
        props: {
            format: "HH:mm",
            placeholder: "请选择结束时间",
        },
    },
]

完整配置项:TDesign_TimePicker