mui自定义日期的起始时间为当前时间,只能选择当前之后的时间

我们如果想要预约什么。选择的日期肯定是从今天开始的,不可能选到之前的日期。这时候我们就需要限制,可供选择的时间啦。你想从当前的时刻开始。


mui的日期选择在下面弹出的。picker的插件





这个data-options的属性可以设置他的类型。

type:datatime  年月日时分mui自定义日期的起始时间为当前时间,只能选择当前之后的时间_第1张图片

type:date  年月日mui自定义日期的起始时间为当前时间,只能选择当前之后的时间_第2张图片

type:month   年月mui自定义日期的起始时间为当前时间,只能选择当前之后的时间_第3张图片

type:time  时分mui自定义日期的起始时间为当前时间,只能选择当前之后的时间_第4张图片


type:hour  年月日时段 mui自定义日期的起始时间为当前时间,只能选择当前之后的时间_第5张图片


限制开始结束的年份:

还可以再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":["年", "月", "日", "时段"] 





下面写个完整的例子,自定义开始的时间从当前的时间开始:


结果放在这里





省略的写法是将上面的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 进行释放,下次用时再创建新实例

})


你可能感兴趣的:(mui,vue)