日期时间选择器
日期时间选择器允许用户通过下拉面板同时选择日期和时间。
用法
设置默认值
通过 defaultValue
选项设置默认值,设置为 'today'
可以将默认值设置为现在时间。
格式化
通过 format
选项设置日期和时间的格式化形式。
限制日期范围
通过 minDate
和 maxDate
来限制可选的日期范围。
自定义菜单
通过 menu
选项可以在弹出面板左侧显示一个自定义菜单,通过 actions
可以自定义底部工具栏上的按钮。在菜单项和按钮上通过 [data-set-date]
属性指定点击按钮时要设定的日期。
自定义左侧菜单
通过 menu
选项可以在弹出面板左侧显示一个自定义菜单,在菜单项配置上通过 [data-set-date]
属性指定点击菜单项时要设定的日期。
自定义底部按钮
通过 actions
可以自定义底部工具栏上的按钮,在菜单项和按钮上通过 [data-set-date]
属性指定点击按钮时要设定的日期。
选项
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
className | any | null | 组件根元素的类名。 style?: object; // 组件根元素的样式。 tagName?: string; // 组件根元素的标签名。 attrs?: object; // 附加到组件根元素上的属性。 clickType?: 'toggle' | 'open'; // 点击类型,toggle 表示点击按钮时切换显示隐藏,open 表示点击按钮时只打开。 name?: string; // 作为表单项的名称。 defaultValue?: 'today' | string; // 默认值。 onChange?: function; // 值变更时的回调函数。 disabled?: boolean; // 是否禁用。 readonly?: boolean; // 是否只读,不允许手动修改。 required?: boolean; // 是否必须提供值(不能清除和选择空值)。 placeholder?: string; // 输入框上占位文本。 format?: string; // 日期格式,默认 yyyy-MM-dd。 icon?: string | object; // 在输入框右侧显示的图标。 weekNames?: string[]; // 星期名称,索引为 0 表示周日。 monthNames?: string[]; // 月份名称,索引为 0 表示一月份。 yearText?: string; // 用于显示年份的格式化文本。 todayText?: string; // 用于显示“今天”的文本。 clearText?: string; // 用于显示“清除”的文本。 weekStart?: number; // 一周从星期几开始,默认 1。 minDate?: DateLike; // 最小可选的日期。 maxDate?: DateLike; // 最大可选的日期。 menu?: object[] | object; // 左侧显示的菜单设置。 actions?: object[] | object; // 底部工具栏设置。 onInvalid?: function; // 日期值无效时的回调函数。 minuteStep?: number; // 分钟选择间隔,默认 5(分钟)。 |