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,
    }
}

12小时制

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

限制时间范围

const rule = {
    type: "TimePicker",
    field: "workTime",
    title: "工作时间",
    value: null,
    props: {
        format: "HH:mm",
        placeholder: "请选择时间",
        hours: [9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        minutes: [0, 15, 30, 45],
    }
}

禁用特定时间

const rule = {
    type: "TimePicker",
    field: "time",
    title: "选择时间",
    value: null,
    props: {
        format: "HH:mm:ss",
        placeholder: "请选择时间",
        isHourDisabled: (hour) => hour < 9 || hour > 18,
        isMinuteDisabled: (minute, hour) => {
            if (hour === 12) {
                return minute < 30;
            }
            return false;
        },
    }
}

Events 事件示例

监听时间变化

const rule = {
    type: "TimePicker",
    field: "time",
    title: "选择时间",
    value: null,
    props: {
        format: "HH:mm:ss",
        placeholder: "请选择时间",
        clearable: true,
    },
    on: {
        'update:value': (value, formattedValue) => {
            console.log('时间改变:', value, formattedValue);
        },
        blur: () => {
            console.log('失去焦点');
        },
        focus: () => {
            console.log('获得焦点');
        },
    },
}

时间选择后联动更新

const rule = [
    {
        type: "TimePicker",
        field: "startTime",
        title: "开始时间",
        value: null,
        props: {
            format: "HH:mm",
            placeholder: "请选择开始时间",
        },
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // 开始时间改变时，自动设置结束时间（开始时间+2小时）
                if (value) {
                    const endTime = value + 2 * 60 * 60 * 1000;
                    $inject.api.setValue('endTime', endTime);
                }
            },
        },
    },
    {
        type: "TimePicker",
        field: "endTime",
        title: "结束时间",
        value: null,
        props: {
            format: "HH:mm",
            placeholder: "请选择结束时间",
        },
    },
]

完整配置项:naive-ui_TimePicker

value :Number | String

Props

名称	类型	默认值	说明	版本
actions	Array<'now' | 'confirm'> | null	['now', 'confirm']	Time Picker 中支持的操作
clearable	boolean	false	是否可清空
disabled	boolean	false	是否禁用
format	string	'HH:mm:ss'	时间格式化字符串，详情见 format
formatted-value	string | null	undefined	格式化后的值	2.24.0
hours	number | number[]	undefined	通过数组指定显示的小时。当值为 number 时，将被当做时间步进处理
minutes	number | number[]	undefined	通过数组指定显示的分钟。当值为 number 时，将被当做时间步进处理
seconds	number | number[]	undefined	通过数组指定显示的秒。当值为 number 时，将被当做时间步进处理
input-readonly	boolean	false	设置输入框为只读（避免在移动设备上打开虚拟键盘）
is-hour-disabled	(hour: number) => boolean	() => false	用于禁用小时的回调函数
is-minute-disabled	(minute: number, hour: number) => boolean	() => false	用于禁用分钟的回调函数
is-second-disabled	(second: number, minute: number, hour: number) => boolean	() => false	用于禁用秒钟的回调函数
placeholder	string	'请选择时间'	选择框的占位符
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'	时间选择器的面板的弹出位置	2.25.0
size	'small' | 'medium' | 'large'	'medium'	选择框的尺寸
use-12-hours	boolean	false	是否使用 12 小时制的面板
value-format	string	跟随 format	格式化后值的格式	2.24.0
on-blur	() => void	undefined	选择框失去焦点时的回调
on-focus	() => void	undefined	选择框获得焦点时的回调
on-update:formatted-value	(value: number | null, timestampValue: number | null) => void	undefined	格式化的值发生改变时的回调	2.24.0
on-update:value	(value: number | null, formattedValue: string | null) => void	undefined	值发生改变时的回调	formattedValue 2.24.0