bootstrap-datepicker限定可选时间范围 一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,
来源:互联网 发布:部落冲突最新兵种数据 编辑:程序博客网 时间:2024/06/13 14:16
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
<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中,对日期选择器进行初始化和配置
[javascript] view plain copy
<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、效果图
一、应用场景
实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制,
如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置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
<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中,对日期选择器进行初始化和配置
[javascript] view plain copy
<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、效果图
阅读全文
0 0
- bootstrap-datepicker限定可选时间范围 一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,
- bootstrap-datepicker限定可选时间范围
- bootstrap-datepicker限定可选时间范围
- My97DatePicker 日期控制,开始时间不能大于结束时间,结束时间不能小于开始时间
- bootstrap日期时间选择器datepicker的使用
- WdatePicker 开始日期不能大于结束日期,结束时间不能小于开始时间
- datepicker,结束时间必须大于开始时间
- WdatePicker 设置开始日期不能大于结束日期且日期不能大于当前时间
- Bootstrap-datepicker日期时间选择器的常见用法总结
- js 日期选择判断结束时间大于开始时间
- easyui 日期框,结束时间大于开始时间
- 时间、日期选择器DatePicker、TimePicker
- 时间选择器,选择日期DatePicker
- php计算一年多少周,同时计算出这一周的开始时间和结束时间(可选返回时间戳或日期)
- 根据不同的时间日期查询数据
- oracle实际环境中常用的时间日期格式应用
- C#获取指定月指定周的日期范围 根据当前时间获取本月开始日期和结束日期
- C#获取指定月指定周的日期范围 根据当前时间获取本月开始日期和结束日期
- 【2017沈阳网络赛】1008 hdu6201 transaction transaction transaction 树形dp
- Centos7 联网和不联网 安装MySQL的方法
- BaseTask 任务分类
- webstorm设置文件类型
- Shader学习之Cg语言一(Cg语言概述)
- bootstrap-datepicker限定可选时间范围 一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,
- 通过Fiddler肆意修改接口返回数据进行测试
- C#综合揭秘——细说多线程(下)
- 四旋翼飞行器教学笔记2.2——姿态读取的计算
- C#梳理【参数传递】
- java 异常及异常使用总结
- Terms of Service
- 彻底征服 Spring AOP 之 实战篇
- CCF认证201509-2 日期计算