LuLu UI pure主题中文文档 » 时间日期选择

作为插件单独使用

引用下面CSS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Input.css">
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Button.css">
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Date.css">

或者合并地址：

<link rel="stylesheet" href="https://qidian.gtimg.com/c/=/lulu/pure/css/common/ui/Input.css,/lulu/pure/css/common/ui/Date.css,/lulu/pure/css/common/ui/Button.css">

JS为：

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Follow.js"></script>
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/DateTime.js"></script>

或者使用合并地址：

<script src="https://qidian.gtimg.com/c/=/lulu/pure/js/common/ui/Follow.js,/lulu/pure/js/common/ui/DateTime.js"></script>

基本效果演示

基于 HTML5 时间选择框的日期时间选择控件，使用原生的 min，max 作为时间范围，部分日期选择类型支持 step 控制步阶。

所有时间输入框为空则使用今天作为默认日期。

然后，因为要兼容 IE 浏览器（让光标无法聚焦），所以在 Pure 主题中，所有的时间选择器输入框都需要使用嵌套结构（非嵌套功能也是正常的）。

1. 选择日期

无初始值-内联：

<span class="ui-input ui-date-input"><input type="date" min="2022-07-03" max="2029-02-22"></span>

有初始值-块级：

<div class="ui-input ui-date-input"><input type="date" value="2015-07-23"></div>

<input> 输入框的 type 属性设置为 date 即可，使用 min 和 max 控制日期范围。

内联输入框保持原本内联特性，默认可以和文字一行显示，宽度大小为输入框尺寸，80%~90% 的开发场景都是使用内联输入框。

块级输入框默认不可以和文字在一行显示，如果想要在一行显示，需要布局支持，块级输入框最大特点是宽度 100% 自适应外部容器元素的宽度，也是其推荐的使用场景。本文档页面本着演示目的，块级输入框尺寸很宽，实际开发肯定要限定宽度的啦，所以不要在意。

禁用：

<span class="ui-input ui-date-input"><input type="date" disabled></span>

禁用只要设置输入框 disabled 即可。

2. 选择年

无初始值-内联：

<span class="ui-input ui-year-input"><input type="year" min="2015" max="2020"></span>

有初始值-块级：

<div class="ui-input ui-year-input"><input type="year" value="2015"></div>

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

3. 选择月

无初始值-内联：

<span class="ui-input ui-month-input"><input type="month" min="2019-09" max="2050-10"></span>

有初始值-块级：

<div class="ui-input ui-month-input"><input type="month" value="2015-07"></div>

<input> 输入框的 type 属性设置为 month 即可，使用 min 和 max 控制月份范围。

4. 选择时间

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

<span class="ui-input ui-time-input"><input type="time" max="23:10"></span>

有初始值和范围限制-块状：

<div class="ui-input ui-time-input"><input type="minute" value="04:20" min="02:25" max="5:54"></div>

精确到分钟-step设置：

<span class="ui-input ui-time-input"><input type="minute" value="09:20" step="1"></span>

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

<span class="ui-input ui-time-input"><input type="hour" value="09:20" min="8" max="20"></span>

如果希望精确到秒，可以使用 Edge 主题的 DateTime.js。

5. 月份范围

无初始值-有范围限制-内联：

<span class="ui-input ui-month-range-input"><input type="month-range" min="2018-03" max="2022-04"></span>

从今天到2022年-块级：

<div class="ui-input ui-month-range-input"><input type="month-range" value="2022-01"></div>

完整初始值：

<span class="ui-input ui-month-range-input"><input type="month-range" value="2016-01 至 2017-11"></span>

6. 日期范围

无初始值-有时间范围：

<span class="ui-input ui-date-range-input"><input type="date-range" min="2017-11-10" max="2022-04-01"></span>

从今天到2022年-块级：

<div class="ui-input ui-date-range-input"><input type="date-range" value="2022-01-01">

有初始值：

<span class="ui-input ui-date-range-input"><input type="date-range" value="2015-04-25 至 2015-05-24"></span>

7. 特殊日子标记

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

日期下拉每个日期元素上会有一个 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;
}

8. 静态展示

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

<div id="dateContainer" class="ui-date-container"></div>

/* 本需求下，今天不显示 */
.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;
}

var myDateTime = new DateTime('#dateContainer');
// 下面就是高亮标记和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效果演示
myDateTime.element.container.addEventListener('mouseover', function (event) {
    var eleItem = event.target;
    if (arrMatchDate.indexOf(eleItem.getAttribute('data-date')) != -1 && (!eleItem.data || !eleItem.data.tips)) {
        new Tips(eleItem, {
            content: '这一天提交xxx代码'
        }).show();
    }
});

9. 原始 UI

<input type="date" is-visible>

设置 is-visible 属性。

IE 浏览器会表现为普通输入框。

动态加载和删除

<button id="bi" class="ui-button" data-type="primary">添加</button>
<button id="br" class="ui-button" data-type="danger">删除</button>

bi.addEventListener('click', function () {
    this.insertAdjacentHTML('afterend', '<p><span class="ui-input ui-date-input"><input type="date"></span></p>');
});
br.addEventListener('click', function () {
    var prev = this.previousElementSibling;
    if (prev.matches('p')) {
        prev.remove();
    }
});

语法和参数

本组件基于 HTML5 原生表单特性实现。因此，大部分情况下，大家无需再使用额外的 JS 或自定义参数进行处理，只要写好上面示意的HTML代码就可以了，比传统实现轻松很多。

不同的 type 类型代码不同的时间选择框，例如 'date' 就是选择日期的。min/max 为可以选择的时间范围。部分时间选择支持 step, 比方说 type='time'，默认 step 的值是5，也就是分钟选择间隔是 5 分钟，如果您设置 step='10'，则可选择的时间间隔就是 10 分钟。

语法

var myDateTime = new DateTime(element, options);

实际开发使用不到上面语法，因为 LuLu UI 会自动识别日期输入框并初始化。

参数

element: 必需。Object元素|String选择器。表示输入框元素或选择器。也可以是静态展示中的容器元素。
options: 可选。Object纯对象。可选参数见下表：

参数名称	支持类型	默认值	释义
value	String	''	文本框初始值。对应HTML中`<input>`元素的`value`属性值。只有`<input>`元素值为空时候，此参数才有作用。建议走HTML驱动，忽略此可选参数。
type	String	'auto'	`'auto'`表示根据`<input>`元素的`type`属性值决定日期面板的类型。可以是`'date'( 2015-01-01 )`，`'year'( 2015 )`，`'month'( 2015-01 )`，`'time'( 12:00 )`，`'date-range'( 2015-01-01 至 2015-06-01 )`，`'month-range'( 2015-01 至 2019-01 )`等。建议走HTML驱动，忽略此可选参数。
min	String	'auto'	时间范围的最小值。优先从`<input>`元素获取。`'auto'`表示没有最小限制。使用符合对应时间格式的时间字符串。建议走HTML驱动，忽略此可选参数。
max	String	'auto'	时间范围的最大值。优先从`<input>`元素获取。`'auto'`表示没有最大限制。使用符合对应时间格式的时间字符串。建议走HTML驱动，忽略此可选参数。
onShow	Function	function () {}	浮层显示时候的回调方法。函数的上下文`this`为当前实例对象，支持两个参数，第1个参数为`<input>`元素，第2个参数为浮层元素。
onHide	Function	function () {}	浮层隐藏时候的回调方法。函数的上下文`this`为当前实例对象，支持两个参数，第1个参数为`<input>`元素，第2个参数为浮层元素。

根据我个人的判断，上面的可选参数，都不是必须参数，应用频率不会高。

如果希望时间选择后做什么事情，你直接给文本框元素绑定change事件就可以了，例如：

input.addEventListener('change', function() {
    console.log('选择的时间是：' + this.value);
});

实例对象的属性和方法

myDateTime 就是日期选择实例对象，包含了下面这些属性和方法：

{
    element: {
        // 容器
        container: null,
        // 输入框外层元素
        trigger: null,
        // 输入框元素
        input: null
    },
    params: {
        max: '9999-12-31',
        min: '0000-01-01',
        type: 'date'
    },
    // 2个回调方法
    callback: {
        show: function () {},
        hide: function () {}
    },
    // 更新日期内容
    date: function () {},
    // 更新日期范围内容
    'date-range': function () {},
    // 更新年份内容
    year: function () {},
    // 更新月份内容
    month: function () {},
    // 更新月份范围内容
    'month-range': function () {},
    // 更新小时内容
    hour: function () {},
    // 更新分钟内容
    minute: function () {},
    // 选择面板显示
    show: function () {},
    // 选择面板隐藏
    hide: function () {}
}

本页贡献者：

zhangxinxu