更新时间:2022-04-26 GMT+08:00
分享

日期选择器

日期选择器组件用于让用户在页面选择日期。该组件由输入框和日期弹出框组成,单击该组件的输入框,弹出日期选择框可选择具体日期。

图1 日期选择器组件效果图

在设计页面左侧从“全部组件 > 文本”中拖出日期选择器组件至设计页面右侧空白处。在页面中选中该组件,单击组件上方图标,配置组件属性,公共属性参数说明请参考组件公共属性说明

表1 日期选择器高级设置参数说明

区域

参数名

说明

日期选择器的类型

日期选择器的类型

日期选择器的类型,支持以下几种:

  • 年选择器
  • 月选择器
  • 日选择器
  • 多个日期选择器
  • 周选择器
  • 带时间的日选择器
  • 带时间的日期范围器
  • 日期范围选择器
  • 月份范围选择器

输入框边框字体设置

输入框字体大小

输入框中字体的大小。

输入框字体颜色

输入框中字体的颜色。

输入框背景颜色

输入框背景颜色

边框颜色

输入框边框的颜色。

边框聚焦颜色

鼠标选中输入框时,边框的颜色。

边框悬浮颜色

鼠标悬浮在输入框上时,边框的颜色。

输入框内容设置

选择范围时的分隔符

选则日期范围时,中间的分隔符,一般使用“-”。

范围选择时开始日期的占位内容

开始日期输入框中没有选择具体日期时显示的文字内容。

例如:开始日期,效果图为

范围选择时结束日期的占位内容

结束日期输入框中没有选择具体日期时显示的文字内容。

非范围选择时的占位内容

不是日期范围选择时显示的文字内容。

例如:选择日期

日期弹出框设置

放大倍数

该组件发布后,日期弹出框在页面占位相对于开发态中放大的倍数。

在大屏页面中,放大倍数可设置大一些。

背景颜色

日期弹出框的背景颜色。

选中态背景颜色

日期弹出框中,选中状态日期的背景颜色。

选中态字体颜色

日期弹出框中,选中状态日期的字体颜色。

前月后月的日期颜色

日期弹出框中,上个月日期和下个月日期的日期颜色。

选择范围的背景色

日期弹出框中,处于选择范围内日期的背景色。

日期弹出框内星期时间设置

星期背景色

日期弹出框内,星期几的背景色。

星期的字体颜色

日期弹出框内,星期几的字体颜色。

时间背景色

日期弹出框内,时间的背景色。

时间的字体颜色

日期弹出框内,时间的字体颜色。

数据源配置

  1. 选中该组件,在组件上方单击,配置组件数据源。
  2. 配置数据系列的数据,单击“保存”。

    系统预置了“日期选择器数据桥接器”,数据源类型选择“桥接器预置”时,可在“桥接器实例”中选择到该桥接器。这里以静态数据类型数据源为例进行举例说明。静态数据举例如下:

    {
      "result": [
        {
          "dataValue": [
            "2021-06-15",
            "2021-07-15"
          ]
        }
      ]
    }

    “dataValue”中日期为未选择日期时,输入框中默认显示的日期。

分享:

    相关文档

    相关产品

close