我们如果想要预约什么。选择的日期肯定是从今天开始的,不可能选到之前的日期。这时候我们就需要限制,可供选择的时间啦。你想从当前的时刻开始。
mui的日期选择在下面弹出的。picker的插件
这个data-options的属性可以设置他的类型。
限制开始结束的年份:
还可以再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":["年", "月", "日", "时段"]
下面写个完整的例子,自定义开始的时间从当前的时间开始:
//首先获取到当前的年月日
var year=new Date().getFullYear() ;
var month=new Date().getMonth()+1;
var day=new Date().getDate();$("#demo").attr("data-options",
"{"type":"hour","beginYear",year,"endYear":2012,"beginMonth":month,"beginDay":day,"customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}") //注意它有引号的
$("#demo").click(function(){
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson); // json字符串转为对象。因为你这里定义的是个字符串,所以要转为对象才能用它里面的属性。
var picker = new mui.DtPicker(options); //在外面没有设置$是mui的时候直接写mui
picker.show(function(rs) {
$(".result").html( '选择结果: ' + rs.text);
//return false; //这是阻止对话框关闭的
picker.dispose(); //释放组件资源,释放后将将不能再操作组件.所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例
})
省略的写法是将上面的options直接用哪个data-options这个属性写,不用那么多代码。(但是要注意那个JSON.parse的使用)上面划线的部分就是获取的那个data-options。所以可以写在一起。
从新来一遍写成
//首先获取到当前的年月日
var year=new Date().getFullYear() ;
var month=new Date().getMonth()+1;
var day=new Date().getDate();$("#demo").click(function(){
//如果你像我下面这样直接把data-options的属性写成对象形式的,不要加外面的引号。那个JOSN.parse也可以直接省略的。
var picker = new mui.DtPicker( {"type":"hour","beginYear",year,"endYear":2012,"beginMonth":month,"beginDay":day,"customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}
);
picker.show(function(rs) {
$(".result").html( '选择结果: ' + rs.text); //rs.text.split(' ')[0]只获取年。下标改成1,只获取月,以此类推
//return false; //这是阻止对话框关闭的
picker.dispose(); //释放组件资源,释放后将将不能再操作组件.所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例
})