浅谈Bootstrap的DatePicker日期范围选择
用日期插件时,经常会有一种需求。两个input框选择。开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间都不大于当前时间。
我们当然可以用选择的结果来判断输入正确与否。但是更好的办法是让我们的日期选择插件做出一些限制。
bootstrap搭配了很优秀的日期选择插件。datepicker和datetimepicker。
两者功能很类似。使用方法也是差不多的。datepicker支持更多的事件和设置。
看api知道日期变化的时候会有一个事件changedate。当选择的日期变化的时候,会调用我们给这个事件的回调。但是遗憾的是当我们直接在输入框中输入或删除日期的时候貌似并不会触发到这个事件。所以可以把input框添加属性 readonly。只读状态,并且给日期控件一个清除按钮。这样日期的变化正常情况下就只有通过日期插件来控制了。
然而当使用datetimepicker插件点击清除按钮的时候,会报错 uncaught typeerror: cannot read property 'gettime' of null,结果导致changedate事件也不能正常使用。
所以就改用datepicker插件。
然后当一个输入框日期变化(包括清除)的时候,changedate事件触发,在其回调函数里修改另一个输入框的可选范围。
另外,datepicker要使界面显示中文,也需要加载css。bootstrap-datepicker.zh-cn.min.js。
下面是代码:
function datepicker(beginselector,endselector){ // 仅选择日期 $(beginselector).datepicker( { language: "zh-cn", autoclose: true, startview: 0, format: "yyyy-mm-dd", clearbtn:true, todaybtn:false, enddate:new date() }).on('changedate', function(ev){ if(ev.date){ $(endselector).datepicker('setstartdate', new date(ev.date.valueof())) }else{ $(endselector).datepicker('setstartdate',null); } }) $(endselector).datepicker( { language: "zh-cn", autoclose: true, startview:0, format: "yyyy-mm-dd", clearbtn:true, todaybtn:false, enddate:new date() }).on('changedate', function(ev){ if(ev.date){ $(beginselector).datepicker('setenddate', new date(ev.date.valueof())) }else{ $(beginselector).datepicker('setenddate',new date()); } }) } datepicker("#date_begin","#date_end");
bootstrap datepicker实现日期选择 开始日期不大于结束时间,结束时间不小于开始时间,开始日期和结束日期都不大于当前日期。
以上就是小编为大家带来的浅谈bootstrap的datepicker日期范围选择全部内容了,希望大家多多支持~
下一篇: ajax无刷新验证注册信息示例
推荐阅读
-
bootstrap中日历范围选择插件daterangepicker的使用详解
-
Bootstrap.css与layDate日期选择样式起冲突的解决办法
-
react-native DatePicker日期选择组件的实现代码
-
浅谈Bootstrap的DatePicker日期范围选择
-
element-ui 限制日期选择的方法(datepicker)
-
bootstrap中日历范围选择插件daterangepicker的使用详解
-
vue中DatePicker 日期选择器遇到的坑,就是选取时间的时候,传送到后台的是当前时间的前一天
-
vue + iview 日期选择器DatePicker少一天的问题
-
Bootstrap datepicker日期选择器插件使用详解
-
Android中DatePicker日期选择器的使用和获取选择的年月日