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">
3. 类型设置

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

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

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

4. 范围限制

使用原生的minmax属性指定时间与日期的范围,例如:

无初始值,使用今天作为日期

<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',使用minmax控制年份范围。

无初始值:

<input type="year" min="2019" max="2023" is="ui-datetime">
有初始值:
<input type="year" value="2015" is="ui-datetime">

3. 选择月

<input>输入框的type属性设置为'month',使用minmax控制月份范围。

无初始值:

<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">

minmax属性测试,只能选择最近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">
从今天到2022年:
<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">
从今天到2025年:
<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">

实时效果如下(点击并观察时间选择器的位置):

本页贡献者:

zhangxinxu