bootstrap-datepicker日期范围

版权声明:本文为博主原创文章,未经博主允许不得转载。

一、应用场景

实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制,

如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值。

二、相关知识点

1、bootstrap-datepicker的初始化

引入bootstrap-datepicker.js和bootstrap-datepicker.css

bootstrap-datepicker配置参数的了解

2、boostrap-datepicker的changeDate事件:日期改变时触发

3、bootstrap-datepicker的setEndDate和setStartDate方法

4、详细配置参见官方文档http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html

三、应用实例

1、JSP中,声明日期选择器

[html] view plain copy

  1. <span style="font-size:14px;"><div class="col-md-6 cy-text-right-md">
  2. <div class="form-inline">
  3. <div class="form-group cy-mar-ver-s">
  4. <span class="cy-pad-hor-s">最后接入时间</span>
  5. </div>
  6. <div class="input-daterange input-group" id="datepicker">
  7. <input type="text" class="form-control" name="start" id="qBeginTime" />
  8. <span class="input-group-addon"></span>
  9. <input type="text" class="form-control" name="end" id="qEndTime" />
  10. </div>
  11. <div class="form-group cy-mar-ver-s">
  12. <button class="btn btn-primary cy-pad-rgt-s" onclick="javascript:doQuery();" type="button">搜索</button>
  13. </div>
  14. </div>
  15. </div></span>

2、JS中,对日期选择器进行初始化和配置

[javascript] view plain copy

  1.              <span style="font-size:14px;"> //开始时间:
  2. $('#qBeginTime').datepicker({  
  3.     todayBtn : "linked",  
  4.     autoclose : true,  
  5.     todayHighlight : true,  
  6.     endDate : new Date()  
  7. }).on('changeDate',function(e){  
  8. var startTime = e.date;  
  9.     $('#qEndTime').datepicker('setStartDate',startTime);  
  10. });  
  11. //结束时间:
  12. $('#qEndTime').datepicker({  
  13.     todayBtn : "linked",  
  14.     autoclose : true,  
  15.     todayHighlight : true,  
  16.     endDate : new Date()  
  17. }).on('changeDate',function(e){  
  18. var endTime = e.date;  
  19.     $('#qBeginTime').datepicker('setEndDate',endTime);  
  20. });</span>  

3、效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go语言中Select语句用法实例

select 语句使得一个 goroutine 在多个通讯操作上等待。 select 会阻塞,直到条件分支中的某个可以继续执行,这时就会执行那个条件分支。当多个...

31360
来自专栏简书专栏

基于bs4+requests的豆瓣电影爬虫

豆瓣电影前250详情页面持久化为250个htm文件,打包文件下载链接: https://pan.baidu.com/s/1_zlZJQJtl9pPEJUGYVM...

21750
来自专栏小特工作室

Navi.Soft31.开发工具(含下载地址)

1系统简介 1.1功能简述 在软件开发过程中,我们需要经常对字符串、文件、数据库操作。有时需要浏览Json格式串,有时需要浏览Xml格式串,有时需要读取txt或...

25090
来自专栏大学生计算机视觉学习DeepLearning

VS下如何建立一个新的MFC程序 网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

43530
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:C1 Wijmo Grids 更多惊喜

本文中,我将给大家介绍一系列非常棒的 Wijmo Grids功能。我们先以一个新的Wijmo Grids 来开始我们这次的 Wijmo Grids 之旅吧。 ?...

24070
来自专栏简书专栏

基于bs4+requests爬取世界赛艇男运动员信息

2018年8月22日笔记 新手学习如何编写爬虫,可以注册1个网易账号,在网易云课堂上学习《Python网络爬虫实战》,链接:http://study.163....

16340
来自专栏Android自学

给WordPress文章添加类似说说的状态样式

19730
来自专栏大学生计算机视觉学习DeepLearning

网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

47160
来自专栏微信小程序开发

小程序国际化实现机制

54520
来自专栏coding for love

在线商城项目09-基于express框架的server端搭建

在本地项目目录加入.gitignore文件,可以直接copy six-tao项目的该文件。

6610

扫码关注云+社区

领取腾讯云代金券