程序员

浅谈Bootstrap的DatePicker日期范围选择

作者:admin 2021-05-12 我要评论

用日期插件时,经常会有一种需求。两个input框选择。开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间都不大于当前时间。 我们当然可以用选择的...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

用日期插件时,经常会有一种需求。两个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日期范围选择全部内容了,希望大家多多支持尊托云数~


原文链接:https://m.jb51.net/article/94967.htm

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • “鸿蒙设备开发”选“址” -->

    “鸿蒙设备开发”选“址” -->

  • Nextcloud是如何成为终极开源生产力套

    Nextcloud是如何成为终极开源生产力套

  • 手把手教你用Pycharm连接远程Python环

    手把手教你用Pycharm连接远程Python环

  • Windows 10X镜像生成工具发布:任意PC

    Windows 10X镜像生成工具发布:任意PC