LuLu UI组件中文文档 » 时间日期选择
Fork Me
关于
命名与设计
使用与发布
组件
颜色
按钮
文本框
搜索框
文本域
表格
loading效果
占位符
单复选框
Switch开关
Select下拉框
Datalist数据列表
Range范围选择
Color颜色选择
Dialog弹框
Tips等提示
LightTip轻提示
Pagination分页
Drop等下拉
Validate表单验证
DateTime日期选择
Tab选项卡切换
综合实例
富交互列表
表单解决方案

时间日期选择

一、日期时间选择

基于HTML5时间选择框的日期时间选择控件，使用原生的min, max作为时间范围，部分选择支持step。所有时间输入框为空则使用今天作为默认日期。只读。

  1. 演示和代码

    • 选择日期(无初始值)： 选择日期(有初始值)： 

      <span class="ui-input ui-date-input"><input type="date" min="2015-07-03" max="2019-12-30"></span>
<span class="ui-input ui-date-input"><input type="date" value="2015-07-23"></span>

    • 选择年(无初始值)： 选择年(有初始值)： 

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

    • 选择月(无初始值)： 选择月(有初始值)： 

      <span class="ui-input ui-month-input"><input type="month" min="2015-05" max="2016-10"></span>
<span class="ui-input ui-month-input"><input type="month" value="2015-07"></span>

    • 选择时间(无初始值)： 选择时间(有初始值)： 选择时间(hour类型, 早8点至晚8点)： 

      <span class="ui-input ui-time-input"><input type="time" max="23:10"></span>
<span class="ui-input ui-time-input"><input type="minute" value="04:20" min="02:25" max="5:54"></span>
<span class="ui-input ui-time-input"><input type="hour" value="09:20" min="8" max="20"></span>

    • 选择月份范围(无初始值，有范围限制)：

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

      选择月份范围(从今天到2020年)：

      <span class="ui-input ui-month-range-input"><input type="month-range" value="2020-01"></span>

      选择月份范围(完整初始值)：

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

    • 选择日期范围(无初始值，有时间范围)：

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

      选择日期范围(从今天到2020年)：

      <span class="ui-input ui-date-range-input"><input type="date-range" value="2020-01-01"></span>
      选择日期范围(有初始值)：
      <span class="ui-input ui-date-range-input"><input type="date-range" value="2015-04-25 至 2015-05-24"></span>

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

      日期下拉每个日期元素上会有一个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. 语法和API

    new DateTime(trigger, options);

    或者：

    $().dateTime(options);

    高级应用使用前者(trigger只能是长度为1的jQuery对象)(返回实例包含很多属性)，快捷使用可以使用后者(可以是多元素集合)。

    默认common.js中对所有符合格式的文本框都进行了初始化。同时，本组件基于HTML5原生表单特性实现。因此，大部分情况下，大家无需再使用额外的JS或自定义参数进行处理，只要写好上面示意的HTML代码就可以了，比传统实现轻松很多。

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

    trigger可以是文本框元素，也可以是其父级，看定位。options为可选参数，具体见下表：

    参数名称 支持类型 默认值 释义
    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)等。建议走HTML驱动，忽略此可选参数。
    min String 'auto' 时间范围的最小值。优先从<input>元素获取。'auto'表示没有最小限制。使用符合对应时间格式的时间字符串。建议走HTML驱动，忽略此可选参数。
    max String 'auto' 时间范围的最大值。优先从<input>元素获取。'auto'表示没有最大限制。使用符合对应时间格式的时间字符串。建议走HTML驱动，忽略此可选参数。
    trigger Array ['change'] 表示<input>元素的value改变时触发的<input>元素事件。默认会触发元素的change时间。因此，我们在回调处理的时候，只要把注意力放在文本框上就可以了，就按照没有时间选择这个功能处理文本框元素就可以了。
    onShow Function $.noop 浮层显示时候的回调方法。函数的上下文this为当前实例对象，支持两个参数，第一个参数为<input>元素元素，第二个参数为浮层元素。
    onHide Function $.noop 浮层隐藏时候的回调方法。函数的上下文this为当前实例对象，支持两个参数，第一个参数为<input>元素元素，第二个参数为浮层元素。

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

    最后再提一下，各类时间选择，当文本框值改变的时候，都会触发<input>元素的change事件(如果参数未变)。因此，不要以为没有选中后的回调方法，你直接跟文本框绑定change事件就可以了，例如，上面例子值改变后的控制台的提示文字源自：

    $("#dateTime input").change(function() {
    console.log('选择的时间是：' + this.value);
});

    跟<select>下拉组件一个套路。

二、作为单独的插件使用

引用下面CSS：

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

JS为：

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Follow.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/DateTime.js"></script>

或者使用合并地址：

<script src="//qidian.gtimg.com/c/=/lulu/theme/peak/js/common/ui/Follow.js,/lulu/theme/peak/js/common/ui/DateTime.js"></script>

单独使用Demo演示

Fork Me 返回顶部