LuLu UI中文文档和演示 » 时间日期选择

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

玉树临风的汤圆 · Python如何去除视频的字幕 | ...· 1 周前 ·

爱跑步的野马 · FFmpeg处理视频的常见用法 - ...· 1 周前 ·

寂寞的海豚 · K230 nncase开发指南 — ...· 1 周前 ·

俊秀的路灯 · "Build input file ...· 3 天前 ·

想发财的滑板 · 电视剧女医明妃传详情介绍-电视剧女医明妃传在 ...· 昨天 ·

刚分手的皮蛋 · Steam - SHENZHEN I/O· 2 月前 ·

至今单身的野马 · 数学科学学院党委组织开展“不忘初心，牢记使命 ...· 6 月前 ·

高大的金针菇 · Reusable Containers ...· 7 月前 ·

面冷心慈的猴子 · 我們闖大禍了 - 十二少女星·川溪入夢 - ...· 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;

$().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驱动，忽略此可选参数。 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驱动，忽略此可选参数。 String 'auto' 时间范围的最小值。优先从<input>元素获取。'auto'表示没有最小限制。使用符合对应时间格式的时间字符串。建议走HTML驱动，忽略此可选参数。 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">
                    <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演示