LuLu UI Edge版中文文档 » 时间日期选择

安装与调用

引用下面CSS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/DateTime/index.css">

JS为：

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/DateTime/index.js"></script>

或者：

<script type="module">
    import "https://qidian.gtimg.com/lulu/hope/ui/DateTime/index.js";
</script>

通用特性

DateTime 组件包含多种时间和日期类型的选择，其中，有些特性是通用的，例如所有的日期与时间都是只读，都设置了 required 属性（避免部分浏览器下出现清除按钮），以及：

1. 构建

基于浏览器原生 <input> 输入框构建，添加 is="ui-datetime" 就可以了。例如下面的代码就可以实现表示日期选择功能：

<input is="ui-datetime">

如果希望有更好的语义，可以指定 type 类型，例如：

<input type="date" is="ui-datetime">

指定type="date"类型后，非yyyy-MM-dd这种格式初始值会认为是不合法的，浏览器默认会以当前日期作为初始值。但是本组件进行了特别的处理，以下时间格式默认是可识别的：

• 2021-3-10
• 2021/3/10
• 2021年3月10日

另外，type="date" 类型输入框中的日期的视觉表现都是斜杠分隔的，例如 2021/03/10，本组件对其进行了局部的样式重置，使得视觉表现是短横线分隔。

2. 初始值

使用原生的 value 属性指定初始日期或时间，如果不指定，则使用今天作为初始日期或时间，例如下面这个日期选择指定了具体的初始日期：

<input type="date" value="2020-11-27" is="ui-datetime">

3. 类型设置

使用原生的 type 属性指定是哪种日期或时间类型选择，默认是 'date' 类型。

其他可选的类型包括：'date'、'year'、'month'、'time'、'hour'、'minute'。

这个后面均会有案例演示。

4. 范围限制

使用原生的 min ，max 属性指定时间与日期的范围，例如：

<input type="date" min="2020-07-03" max="2024-02-22" is="ui-datetime">

另外部分日期选择类型支持step控制步阶，例如小时选择只能每2个小时间隔选择。

5. 事件

交互过程中会触发 3 种事件：

1. 时间或日期选择时候的 'change' 事件；
2. 选择面板显示时候的 'show' 事件；
3. 选择面板隐藏时候的 'hide' 事件；

使用示意如下：

<input type="date" id="input" value="2020-11-27" is="ui-datetime">

input.addEventListener('change', function () {
    console.log('选择的时间是：' + this.value);
});
input.addEventListener('show', function() {
    console.log(`显示了，ID是${ this.id }`);
});
input.addEventListener('hide', function(e) {
    console.log(`隐藏了，ID是${ this.id }`);
});

本组件还支持下面2个事件：

1. 下拉容器准备完毕的 'DOMContentLoaded' 事件；
2. 时间选择组件和页面建立连接的 'connected' 事件；

6. 禁用

和原生的输入框一样，设置 disabled 属性即可禁用，例如：

<input type="date" disabled is="ui-datetime">

类型示意

1. 选择日期

设置 type="date"，例如：

<input type="date" value="2020-11-27" is="ui-datetime">

2. 选择年

type 属性值设置为 'year'，使用 min 和 max 控制年份范围。

<input type="year" min="2019" max="2023" is="ui-datetime">

<input type="year" value="2015" is="ui-datetime">

3. 选择月

type 属性值设置为 'month'，使用 min 和 max 控制月份范围。

<input type="month" min="2019-09" max="2050-10" is="ui-datetime">

<input type="month" value="2015-07" is="ui-datetime">

4. 选择时间

原生时间选择，设置 type 属性值设置为 'time'，会根据系统自动表现为 12 小时制或 24 小时制。

<input type="time" max="23:10" is="ui-datetime">

精确到秒，两种方法，value 初始值精确到秒，或者 step 属性值不是 60 倍数的整数值。

<input type="time" min="03:10" is="ui-datetime" step="1">

下面是专门的分钟和小时的选择，采用 24 小时格式。

<input type="minute" value="04:20" min="02:25" max="5:54" is="ui-datetime">

<input type="minute" value="09:20" step="5" is="ui-datetime">

选择小时，分钟的值保持在 '00'。

<input type="hour" value="09:20" min="8" max="20" is="ui-datetime">

5. 原生日期选择

不设置is="ui-datetime"就是原生的时间选择输入框，例如：

<input type="date">