mui 日期控件

有时候我们用到日期的时候，需要不同的格式，就需要data-options的属性可以设置他的类型。

<ul class="mui-table-view">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    会议时间 <span id='stardate' data-options='{"type":"date"}' class="mui-pull-right"
                                               style="margin-right: 20px;min-width:160px;text-align: right;">请选择（必填）</span>
                                </a>
                                <input type="hidden" name="rideStartTime" id='rideStartTime'/>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    至 <span id='enddate' data-options='{"type":"date"}' class="mui-pull-right"
                                            style="margin-right: 20px;min-width:160px;text-align: right;">请选择（必填）</span>
                                </a>
                                <input type="hidden" name="rideEndTime" id='rideEndTime'/>
                            </li>
                        </ul>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    会议时间 <span id='startime' data-options='{"type":"time"}' class="mui-pull-right"
                                               style="margin-right: 20px;min-width:160px;text-align: right;">请选择（必填）</span>
                                </a>
                                <input type="hidden" name="rideStartTime" id='rideS2tartTime'/>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    至 <span id='endtime' data-options='{"type":"time"}' class="mui-pull-right"
                                            style="margin-right: 20px;min-width:160px;text-align: right;">请选择（必填）</span>
                                </a>
                                <input type="hidden" name="rideEndTime" id='rideEn2dTime'/>
                            </li>
                        </ul>

我这里只用到了time和date这2个属性

  document.getElementById("stardate").addEventListener('tap', function () {
                var dDate = new Date();
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var picker = new mui.DtPicker(options);
                picker.show(function (rs) {
                    console.log(rs)
                    var timestr = rs.text;
                    $('#stardate').html(timestr);
                    picker.dispose();
                });
            })
            document.getElementById("enddate").addEventListener('tap', function () {
                var dDate = new Date();
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var picker = new mui.DtPicker(options);
                picker.show(function (rs) {
                    console.log(rs)
                    var timestr = rs.text;
                    $('#enddate').html(timestr);
                    picker.dispose();
                });
            })
            document.getElementById("startime").addEventListener('tap', function () {
                var dDate = new Date();
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var picker = new mui.DtPicker(options);
                picker.show(function (rs) {
                    console.log(rs)
                    var timestr = rs.text;
                    $('#startime').html(timestr);
                    picker.dispose();
                });
            })
            document.getElementById("endtime").addEventListener('tap', function () {
                var dDate = new Date();
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var picker = new mui.DtPicker(options);
                picker.show(function (rs) {
/*

* rs.value 拼合后的 value

* rs.text 拼合后的 text

* rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本

* rs.m 月，用法同年

* rs.d 日，用法同年

* rs.h 时，用法同年

* rs.i 分（minutes 的第二个字母），用法同年

* 返回 false 可以阻止选择框的关闭

* return false;
*/
                    var timestr = rs.text;
                    $('#endtime').html(timestr);
                    picker.dispose();
                    /*
                   释放组件资源，释放后将将不能再操作组件

* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。

* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。

* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                    */
                });
            })

data-options的属性
type:datatime 年月日时分

type:date 年月日

type:month 年月

type:time 时分

type:hour 年月日时段

限制开始结束的年份：

还可以再data-options里面增加属性beginYear:2014开始年份, endYear:2016结束年份

形如 data-options=’{“type”:”date”,”beginYear”:2014,”endYear”:2016}’

因此我们可以以此类推：限制开始的月，日，小时

beginMonth ，beginDay，beginHours

然后你可以自己设置现在的时间做为开始的时间。

var year=new Date().getFullYear() ; 年

var month=new Date().getMonth()+1; 月

var day=new Date().getDate();日

data-options={“type”:”date”,”beginYear”:year,”beginMonth”:month,”beginDay”:day}

设置时段：（设置时间/日期别名设置格式:）

“customData”:{“h”:[{“text”:”上午”,”value”:”上午”},{“text”:”下午”,”value”:”下午”},{“text”:”晚上”,”value”:”晚上”}]}

“customData”:{“h”:[{“text”:”am”,”value”:”上午”},{“text”:”pm”,”value”:”下午”}]} 用am来代替原来的上午，pm代替下午

设置默认标签区域提示语

“labels”:[“年”, “月”, “日”, “时段”]

选择时段 …