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

安装与调用

引用下面CSS：

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Input.css">
<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Date.css">

JS为：

<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/DateTime.js"></script>

本组件为Web Components，引用时需添加type="module"，也可采用如下方式进行引用：

<script type="module">
    import "https://unpkg.com/lu2/theme/edge/js/common/ui/DateTime.js";
</script>

本组件为内置自定义元素组件，如果需要兼容Safari浏览器，还需要引入下面的JS。

<script src="https://unpkg.com/lu2/theme/edge/js/common/safari-polyfill.js"></script>

如果是npm安装调用，则：

import 'lu2/theme/edge/css/common/ui/Input.css';
import 'lu2/theme/edge/css/common/ui/Date.css';
import 'lu2/theme/edge/js/common/safari-polyfill.js';
import 'lu2/theme/edge/js/common/ui/DateTime.js';

如果 JS import语法报错，试试在业务代码中动态引入。

import('lu2/theme/edge/js/common/safari-polyfill.js');
import('lu2/theme/edge/js/common/ui/DateTime.js');

通用特性

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

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日

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

2. 初始值

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

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

如果设置了value属性，但是值是空字符串，则采用和原生时间选择组件一样的规则，表现为“年-月-日（短横线也可能是斜杠）”，例如：

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

3. 类型设置

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

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

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

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. 选择年

<input>输入框的type属性设置为'year'，使用min和max控制年份范围。

无初始值：

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

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

3. 选择月

<input>输入框的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. 选择时间

小时分钟均可选择-无初始值：

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

精确到秒，2种方法，value初始值精确到秒，或者step属性值不是60倍数的整数值，step会影响上下快捷键选择日期的值。

step="1"，无初始值：

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

下面是专门的分钟和小时的选择，采用和日期选择一样的排版与交互：

分钟选择，有初始值和范围限制：

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

精确到分钟-step设置：

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

选择小时, 早8点至晚8点：

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

5. 选择日期和时间

设置type="datetime-local"，例如：

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

min和max属性测试，只能选择最近30天月，例如：

<input type="datetime-local" min="2023/8/4 12:00" max="2023/9/3 12:00" is="ui-datetime">

6. 月份范围

无初始值-有范围限制：

<input type="month-range" min="2021-03" max="2025-04" is="ui-datetime">

<input type="month-range" value="2022-01" is="ui-datetime">

完整初始值：

<input type="month-range" value="2021-01 至 2023-11" is="ui-datetime">

使用年月日表示也是支持的，例如 value="2021年1月12日 至 2023年11月1日" ：

7. 日期范围

无初始值-有时间范围：

<input type="date-range" min="2020-11-10" max="2025-04-01" is="ui-datetime">

<input type="date-range" value="2022-01-01" is="ui-datetime">

有初始值：

<input type="date-range" value="2021-04-25 至 2021-05-24" is="ui-datetime">

8. 原生日期选择

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

<input type="date" class="ui-input">

9. 原生日期时间选择

设置type属性值为datetime-local。

<input type="datetime-local" class="ui-input">

内置属性和方法

设置了is="ui-datetime"的<input>元素自身包含了下面这些属性和方法：

{
    element: {
        // 浮层元素
        target: null
    },
    params: {
        // 类型，只读
        type: 'date'
    },
    // date()至datetime()方法均支持指定容器
    // eg. input.date(container);
    // 更新日期内容
    date: function () {},
    // 更新日期范围内容
    'date-range': function () {},
    // 更新年份内容
    year: function () {},
    // 更新月份内容
    month: function () {},
    // 更新月份范围内容
    'month-range': function () {},
    // 更新时间内容
    time: function () {},
    // 更新小时内容
    hour: function () {},
    // 更新分钟内容
    minute: function () {},
    // 更新日期时间内容
    datetime: function () {},
    // 定位
    position: function () {},
    // 面板显示与定位
    show: function () {},
    // 面板隐藏
    hide: function () {}
}

延伸与拓展

1. 特殊日子标记

标记特殊的日子，例如国庆节，劳动节等。

日期下拉每个日期元素上会有一个data-date属性，其值为当前完整年月日，于是我们就通过CSS的属性选择器进行日期匹配，改变UI样式，显示特殊的日期。例如国庆节：

.ui-date-item[data-date$="10-01"] {
    position: relative;
    color: transparent;
}
.ui-date-item[data-date$="10-01"]:before {
    content: '国庆';
    font-size: 12px;
    color: red;
    position: absolute;
    left: 0; top: 0; right: 0;
    text-align: center;
}
span.ui-date-item[data-date$="10-01"]:before {
    color: #ccd0d7;
}
.selected[data-date$="10-01"]:before {
    color: #fff;
}

2. 静态展示

标记哪一天更新了代码，本功能非组件内置，这里演示如何实现这个需求。效果如下：

使用的代码如下所示：

<div class="update-date-mark">
    <input id="dateMark" is="ui-datetime" hidden>
</div>

var eleDateMark = document.querySelector('#dateMark');
eleDateMark.insertAdjacentElement('afterend', eleDateMark.element.target);
eleDateMark.position = eleDateMark.hide = function () {};
eleDateMark.show();

下面是样式处理相关的代码：

/* 本需求下，今天不显示 */
.update-date-mark .ui-date-now {
    display: none;
}
/* 原来的选中态忽略 */
.update-date-mark .selected,
.update-date-mark a.ui-date-item:hover {
    background-color: #fff;
}
.update-date-mark .selected {
    color: inherit;
}

// 下面就是高亮标记和tips提示处理了
// 需要匹配的数据，这里随便伪造几个演示下
var arrMatchDate = ['2019-11-20', '2019-11-22', '...'];
// 创建CSS进行样式匹配
var strCssStyle = '';
arrMatchDate.forEach(function (date) {
    strCssStyle += 'div.update-date-mark .ui-date-item[data-date="' + date + '"]{background-color: #2a80eb; color: #fff;}';
});
// <style>元素创建并插入到页面
var eleStyle = document.createElement('style');
eleStyle.innerHTML = strCssStyle;
document.body.appendChild(eleStyle);

// 这个是显示黑色tips效果演示
eleDateMark.element.target.addEventListener('mouseover', function (event) {
    var eleItem = event.target;
    if (arrMatchDate.indexOf(eleItem.getAttribute('data-date')) != -1) {
        eleItem.tips('这一天提交xxx代码');
    }
});

浮层的控制

相关参数说明详见Color组件“浮层的控制”，这些参数直接设置在<input>元素上，例如下面这个在上方显示的时间选择器：

<input is="ui-datetime" data-position="1-4">

实时效果如下（点击并观察时间选择器的位置）：