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”:[“年”, “月”, “日”, “时段”]
选择时段 …