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

Fork Me

时间日期选择

作为插件单独使用

引用下面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 时间选择框的日期时间选择控件,使用原生的 minmax 作为时间范围,部分日期选择类型支持 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 即可,使用 minmax 控制日期范围。

内联输入框保持原本内联特性,默认可以和文字一行显示,宽度大小为输入框尺寸,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 即可,使用 minmax 控制年份范围。

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 即可,使用 minmax 控制月份范围。

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