Skip to main content

日期选择器(DatePicker)组件

可以在前端获取用户输入的日期及时间

1、数据

字段描述
日期格式设置所选日期的格式
默认日期

设置一个默认日期,默认日期修改后,组件当前日期会自动更新

默认日期必须是使用以下格式的ISO
字符串:

- YYYY-MM-DD
- YYYY-MM-DD HH:mm 等

也可以使用moment 对象填充,需遵循遵循 ISO 8601 标准
{{ moment() }}

每周第一天设置一周中的哪一天首先出现在日期选择器组件的日历中。接受介于 0 和 6 之间的数值,"0-6"分别为“星期天到星期六”
时间精度确定时间是否包含在日期选择器中,以及该时间是精确到分钟还是秒。启用 JS 后,值可能是“无”、“分钟”或“秒”。

2、标签

字段描述
文本可设置日期选择框上方的文本
位置可以设置文本与日期选择框的位置排序,分别为“自动”、“左”、“右”

3、校验

字段描述
必填开启后需强制填写日期时间
最小日期设置日期选择器组件日期选择范围最早的日期时间段
最大日期设置日期选择器组件日期选择范围最晚的日期时间段

4、属性

字段描述
是否显示控制组件在页面上的可见性。关闭时:当应用程序发布时,组件将不可见。在编辑模式下它看起来是半透明的
禁用使该组件不可点击或不可用。该组件对用户保持可见,但不允许用户交互。
加载时显示动画关闭时,该组件加载时不会有任何动画。您可以使用拨动开关将其打开/关闭。您还可以通过启用旁边的 JS 标签使用 javascript 将其关闭/打开。
显示快捷菜单开启后会在日期选择左侧开启便捷选项,支持选择“今天”、“昨天”、“一周前”、“一个月前”、“三个月前”、“一年前”
选中后关闭开启后,当输入框下拉出现日期选择栏时,选中某个日期后会自动关闭选择栏
高度

可对组件的高度进行配置:


固定:使用拖动和调整大小,组件的高度保持设置不变。
自动高度:组件的高度对内容变化做出反应。
区间自动高度:与 Auto height 相同,具有可配置选项以设置组件可以占用的最小和最大行数。

5、事件

字段描述
onDateSelected在日期选择器组件下单选项选择日期时要执行的动作
onFocus点击日期选择器组件输入框时发生的动作
onBlur点击日期选择器输入框离开后发生的动作

6、样式

字段描述
字体颜色设置日期选择器组件内文本的颜色
字体大小设置日期选择器组件内文本的字体大小
强调可以设置日期选择器组件内文本是加粗还是倾斜
强调色设置日期选择器组件内勾选框被选中时的颜色
边框圆角对日期选择器组件边框样式进行修改

7、js代码