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 事件属性绑定带参数的函数
Mar 13 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
angular实现商品筛选功能
Feb 01 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 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 中文处理技巧
2010/04/25 PHP
php遍历数组的方法分享
2012/03/22 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
js 操作select相关方法函数
2009/12/06 Javascript
获取body标签的两种方法
2011/10/13 Javascript
javascript 常用功能总结
2012/03/18 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
美国留学经济担保书
2014/05/20 职场文书
党员干部一句话承诺
2014/05/30 职场文书
师德师风剖析材料
2014/09/30 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
教师节老师寄语
2015/05/28 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技