用日期插件时,经常会有一种需求。两个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日期范围选择全部内容了,希望大家多多支持尊托云数~
从今年 9 月开始,微软 Edge 的更新速度将加快。跟随 Google Chrome 浏览器的脚...
在往期文章 【技术流派】教你提高双目立体视觉系统的精度 中博主关于立体视觉系...
序 本文主要研究一下dkron的Scheduler Scheduler // Scheduler represents a dkr...
对于正则表达式的中\B和\b 有些地方会出现弄不懂的情况 或许你看了下面这篇博客 ...
JSP Spring ApplicationContext的国际化支持 1.ApplicationContext接口继承了Mes...
从输入URL到浏览器显示页面发生了什么 输入网址 DNS解析 1. 本地域名解析 2.递归...
前两天刷leetcode的时候,突发奇想,leetcode中最难的一道题是什么样子的呢? 于...
复制代码 代码如下: html { overflow: hidden; } body { overflow: hidden; } 在...
复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会...
文章目录 二叉树的深度 二叉搜索树的第k大节点 从上到下打印二叉树 二叉树的镜像...