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 相关文章推荐
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP反向代理类代码
2014/08/15 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
angular多语言配置详解
2019/05/16 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python中的TCP socket写法示例
2018/05/11 Python
浅析python中while循环和for循环
2019/11/19 Python
详解python破解zip文件密码的方法
2020/01/13 Python
python如何调用百度识图api
2020/09/29 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
求职信怎么写范文
2014/05/26 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL