主页 > 知识库 > 浅谈Bootstrap的DatePicker日期范围选择

浅谈Bootstrap的DatePicker日期范围选择

热门标签:怎样在地图标注文字 河间市地图标注app 中国地图标注不明确情况介绍表 地图标注推销坑人 东平县地图标注app 上海企业外呼系统价钱 大众点评400电话怎么申请 立陶宛地图标注 电销机器人 长春

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

您可能感兴趣的文章:
  • bootstrap datepicker的基本使用教程
  • JS控件bootstrap datepicker使用方法详解
  • BootStrap Datepicker 插件修改为默认中文的实现方法
  • bootstrap datepicker限定可选时间范围实现方法
  • bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
  • BootStrap中Datepicker控件带中文的js文件
  • BootStrap的Datepicker控件使用心得分享
  • bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

标签:内江 益阳 四川 玉树 铜川 辽宁 本溪 营口

巨人网络通讯声明:本文标题《浅谈Bootstrap的DatePicker日期范围选择》,本文关键词  浅谈,Bootstrap,的,DatePicker,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《浅谈Bootstrap的DatePicker日期范围选择》相关的同类信息!
  • 本页收集关于浅谈Bootstrap的DatePicker日期范围选择的相关信息资讯供网民参考!
  • 企业400电话

    智能AI客服机器人
    15000

    在线订购

    合计11份范本:公司章程+合伙协议+出资协议+合作协议+股权转让协议+增资扩股协议+股权激励+股东会决议+董事会决议

    推荐文章