日期选择器(DatePicker)组件
可以在前端获取用户输入的日期及时间
 (1) (1) (1).png)
1、数据
字段 | 描述 |
---|---|
日期格式 | 设置所选日期的格式 |
默认日期 | 设置一个默认日期,默认日期修改后,组件当前日期会自动更新 默认日期必须是使用以下格式的ISO - YYYY-MM-DD |
每周第一天 | 设置一周中的哪一天首先出现在日期选择器组件的日历中。接受介于 0 和 6 之间的数值,"0-6"分别为“星期天到星期六” |
时间精度 | 确定时间是否包含在日期选择器中,以及该时间是精确到分钟还是秒。启用 JS 后,值可能是“无”、“分钟”或“秒”。 |
 (2) (1) (1).png)
2、标签
字段 | 描述 |
---|---|
文本 | 可设置日期选择框上方的文本 |
位置 | 可以设置文本与日期选择框的位置排序,分别为“自动”、“左”、“右” |
 (2) (1).png)
3、校验
字段 | 描述 |
---|---|
必填 | 开启后需强制填写日期时间 |
最小日期 | 设置日期选择器组件日期选择范围最早的日期时间段 |
最大日期 | 设置日期选择器组件日期选择范围最晚的日期时间段 |
 (1) (1).png)
4、属性
字段 | 描述 |
---|---|
是否显示 | 控制组件在页面上的可见性。关闭时:当应用程序发布时,组件将不可见。在编辑模式下它看起来是半透明的 |
禁用 | 使该组件不可点击或不可用。该组件对用户保持可见,但不允许用户交互。 |
加载时显示动画 | 关闭时,该组件加载时不会有任何动画。您可以使用拨动开关将其打开/关闭。您还可以通过启用旁边的 JS 标签使用 javascript 将其关闭/打开。 |
显示快捷菜单 | 开启后会在日期选择左侧开启便捷选项,支持选择“今天”、“昨天”、“一周前”、“一个月前”、“三个月前”、“一年前” |
选中后关闭 | 开启后,当输入框下拉出现日期选择栏时,选中某个日期后会自动关闭选择栏 |
高度 | 可对组件的高度进行配置:
|
 (1) (1).png)
5、事件
字段 | 描述 |
---|---|
onDateSelected | 在日期选择器组件下单选项选择日期时要执行的动作 |
onFocus | 点击日期选择器组件输入框时发生的动作 |
onBlur | 点击日期选择器输入框离开后发生的动作 |
 (1).png)
6、样式
字段 | 描述 |
---|---|
字体颜色 | 设置日期选择器组件内文本的颜色 |
字体大小 | 设置日期选择器组件内文本的字体大小 |
强调 | 可以设置日期选择器组件内文本是加粗还是倾斜 |
强调色 | 设置日期选择器组件内勾选框被选中时的颜色 |
边框圆角 | 对日期选择器组件边框样式进行修改 |
 (1).png)
7、js代码
 (1) (1) (1).png)