LuLu UI组件中文文档 » 时间日期选择

时间日期选择

一、日期时间选择

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

  1. 演示和代码

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

      <span class="ui-input ui-date-input"><input type="date" min="2015-07-03" max="2022-07-13"></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 返回顶部