bootstrap datepicker限定可选时间范围实现方法


Posted in Javascript onSeptember 28, 2016

一、应用场景

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

如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置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中,声明日期选择器

<span style="font-size:14px;"><div class="col-md-6 cy-text-right-md"> 
<div class="form-inline"> 
<div class="form-group cy-mar-ver-s"> 
<span class="cy-pad-hor-s">最后接入时间</span> 
</div> 
<div class="input-daterange input-group" id="datepicker"> 
<input type="text" class="form-control" name="start" id="qBeginTime" /> 
<span class="input-group-addon">至</span> 
<input type="text" class="form-control" name="end" id="qEndTime" /> 
</div> 
<div class="form-group cy-mar-ver-s"> 
<button class="btn btn-primary cy-pad-rgt-s" onclick="javascript:doQuery();" type="button">搜索</button> 
</div> 
</div> 
</div></span>

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

<span style="font-size:14px;"> //开始时间: 
$('#qBeginTime').datepicker({ 
todayBtn : "linked", 
autoclose : true, 
todayHighlight : true, 
endDate : new Date() 
}).on('changeDate',function(e){ 
var startTime = e.date; 
$('#qEndTime').datepicker('setStartDate',startTime); 
}); 
//结束时间: 
$('#qEndTime').datepicker({ 
todayBtn : "linked", 
autoclose : true, 
todayHighlight : true, 
endDate : new Date() 
}).on('changeDate',function(e){ 
var endTime = e.date; 
$('#qBeginTime').datepicker('setEndDate',endTime); 
});</span>

3、效果图

bootstrap datepicker限定可选时间范围实现方法

bootstrap datepicker限定可选时间范围实现方法

以上所述是小编给大家介绍的bootstrap datepicker限定可选时间范围实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 #Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 #Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 #Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 #Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 #Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 #Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 #Javascript
You might like
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
js防止表单重复提交的两种方法
2013/09/30 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python如何对XML 解析
2020/06/28 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
电气自动化自荐信
2013/10/10 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
读书活动总结范文
2014/04/26 职场文书
环境卫生标语
2014/06/09 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
个人合作协议范本
2015/08/06 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang