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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
js实现拖动缓动效果
Jan 13 Javascript
JS轮播图的实现方法2
Aug 25 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
php的4种常见运行方式
2015/03/20 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
政风行风评议工作总结
2014/10/21 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
python 实现的截屏工具
2021/05/08 Python
JavaScript ES6的函数拓展
2022/01/18 Javascript
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
python实现双链表
2022/05/25 Python