脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → datepicker 日期范围

浅谈Bootstrap的DatePicker日期范围选择

 更新时间：2016年10月18日 08:20:02   投稿：jingxian  
下面小编就为大家带来一篇浅谈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实现文件上传功能(Spring MVC)

    Ajax实现文件上传功能(Spring MVC)

    这篇文章主要为大家详细介绍了Ajax实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 有关Ajax中get和post的使用问题

    有关Ajax中get和post的使用问题

    下面小编就为大家带来一篇有关Ajax中get和post的使用问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • ajax获取json数据为undefined原因分析

    ajax获取json数据为undefined原因分析

    Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。这篇文章主要介绍了ajax获取json数据为undefined--原因,需要的朋友可以参考下
    2017-11-11
  • Select2在使用ajax获取远程数据时显示默认数据的方法

    Select2在使用ajax获取远程数据时显示默认数据的方法

    今天小编就为大家分享一篇Select2在使用ajax获取远程数据时显示默认数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Ajax实现三级联动效果

    Ajax实现三级联动效果

    这篇文章主要为大家详细介绍了Ajax实现三级联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • ajax调用中ie缓存问题解决方法

    ajax调用中ie缓存问题解决方法

    这篇文章主要介绍了ajax调用中ie缓存问题解决方法,较为详细的分析了ajax调用中ie缓存机制的原理与具体解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • Ajax 框架之SSM整合框架实现ajax校验

    Ajax 框架之SSM整合框架实现ajax校验

    这篇文章主要介绍了Ajax 框架之SSM整合框架实现ajax校验,需要的朋友可以参考下
    2017-04-04
  • ajax异步传值及后端接收参数的多种方式小结

    ajax异步传值及后端接收参数的多种方式小结

    这篇文章主要介绍了ajax异步传值及后端接收参数的多种方式小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • 活到老学到老学习AJAX跨域（三）

    活到老学到老学习AJAX跨域（三）

    学习AJAX其实有个很重要的应用，就是为了执行另外几个站点的ASP，返回结果。通过本文给大家介绍ajax跨域相关知识，需要的朋友参考下
    2016-02-02
  • ajax异步请求刷新

    ajax异步请求刷新

    ajax刷新是一种用户体验良好的刷新方式,这篇文章主要介绍了ajax异步请求刷新,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论