Skip to content

TimePicker 时间选择器

规则

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

参考:Ant-design-vue_TimePicker

value :Number | String

Props

参数说明类型默认值
allowClear是否展示清除按钮booleantrue
autofocus自动获取焦点booleanfalse
bordered是否有边框booleantrue
clearIcon自定义的清除图标v-slot:clearIcon-
clearText清除按钮的提示文案stringclear
disabled禁用全部操作booleanfalse
disabledTime不可选择的时间DisabledTime-
format展示的时间格式stringHH:mm:ss
getPopupContainer定义浮层的容器,默认为 body 上新建 divfunction(trigger)-
hideDisabledOptions隐藏禁止选择的选项booleanfalse
hourStep小时选项间隔number1
inputReadOnly设置输入框为只读(避免在移动设备上打开虚拟键盘)booleanfalse
minuteStep分钟选项间隔number1
open面板是否打开booleanfalse
placeholder没有值的时候显示的内容string | [string, string]请选择时间
placement选择框弹出的位置bottomLeft bottomRight topLeft topRightbottomLeft
popupClassName弹出层类名string-
popupStyle弹出层样式对象object-
renderExtraFooter选择框底部显示自定义的内容v-slot:renderExtraFooter-
secondStep秒选项间隔number1
showNow面板是否显示“此刻”按钮boolean-
status设置校验状态'error' | 'warning'-
suffixIcon自定义的选择框后缀图标v-slot:suffixIcon-
use12Hours使用 12 小时制,为 true 时 format 默认为 h:mm:ss abooleanfalse
valueFormat可选,绑定值的格式,对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象string,具体格式-

DisabledTime

typescript
type DisabledTime = (now: Dayjs) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

Events

事件名称说明回调参数
change时间发生变化的回调function(time: dayjs | string, timeString: string): void
openChange面板打开/关闭时的回调(open: boolean): void

TimeRangePicker

属性与 DatePicker 的 RangePicker 相同。还包含以下属性:

参数说明类型默认值
order始末时间是否自动排序booleantrue
disabledTime不可选择的时间RangeDisabledTime-

RangeDisabledTime

typescript
type RangeDisabledTime = (
  now: Dayjs,
  type = 'start' | 'end',
) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用