boostrap的日期选择:datetimepicker 做 开始时间与 结束时间的判断,开始时间小于结束时间
2017-06-28 18:46
806 查看
JQuery 和 bootstrap 插件自己导入,这里直接上代码:
这里 pzTime 为开始时间,
pzqxTime 为结束时间;
结束时间 在 开始时间之后,不能选择开始之前的时间!
开始时间在结束时间之前!
从前面开始时间选择:
从后面 结束时间选择:
下面有个更加严格的方法:
获取开始时间的值 = 结束时间,这是前面约束;
获取结束时间的值 = 开始时间,这是后面的约束;
这里最大限度,开始时间 = 结束时间,为当天,是比较合理的!
$("#startDate").datetimepicker({
language : 'zh-CN',
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView: "month",
format: 'yyyy-mm-dd',
forceParse : 0
}).on('hide', function(event) {
event.preventDefault();
event.stopPropagation();
var startTime = event.date;
$("#expirationDate").datetimepicker('setStartDate',startTime);
$("#expirationDate").val("");
});
$("#expirationDate").datetimepicker({
language : 'zh-CN',
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView: "month",
format: 'yyyy-mm-dd',
forceParse : 0
}).on('hide', function(event) {
event.preventDefault();
event.stopPropagation();
var endTime = event.date;
$("#startDate").datetimepicker('setEndDate',endTime);
});
这里 pzTime 为开始时间,
pzqxTime 为结束时间;
结束时间 在 开始时间之后,不能选择开始之前的时间!
开始时间在结束时间之前!
从前面开始时间选择:
从后面 结束时间选择:
$("#pzTime").datetimepicker({ language : 'zh-CN', weekStart : 1, todayBtn : 1, autoclose : 1, todayHighlight : 1, startView : 2, minView: "month", format: 'yyyy-mm-dd', forceParse : 0, endDate : new Date() }).on('hide', function(event) { event.preventDefault(); event.stopPropagation(); var startTime = event.date; $('#pzqxTime').datetimepicker('setStartDate',startTime); $('#pzqxTime').val(""); }); $("#pzqxTime").datetimepicker({ language : 'zh-CN', weekStart : 1, todayBtn : 1, autoclose : 1, todayHighlight : 1, startView : 2, minView: "month", format: 'yyyy-mm-dd', forceParse : 0, endDate : new Date() }).on('hide', function(event) { event.preventDefault(); event.stopPropagation(); var endTime = event.date; $('#pzTime').datetimepicker('setEndDate',endTime); });
下面有个更加严格的方法:
获取开始时间的值 = 结束时间,这是前面约束;
获取结束时间的值 = 开始时间,这是后面的约束;
这里最大限度,开始时间 = 结束时间,为当天,是比较合理的!
$("#startDate").datetimepicker({
language : 'zh-CN',
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView: "month",
format: 'yyyy-mm-dd',
forceParse : 0
}).on('hide', function(event) {
event.preventDefault();
event.stopPropagation();
var startTime = event.date;
$("#expirationDate").datetimepicker('setStartDate',startTime);
$("#expirationDate").val("");
});
$("#expirationDate").datetimepicker({
language : 'zh-CN',
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView: "month",
format: 'yyyy-mm-dd',
forceParse : 0
}).on('hide', function(event) {
event.preventDefault();
event.stopPropagation();
var endTime = event.date;
$("#startDate").datetimepicker('setEndDate',endTime);
});
相关文章推荐
- bootstrap-datepicker限定可选时间范围 一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,
- laydate日期插件案例,结束时间小于开始时间不可选择
- js 日期选择判断结束时间大于开始时间
- Android 选择日期时间对话框(可选择开始结束时间,已解决弹出键盘问题)
- My97DatePicker 日期控制,开始时间不能大于结束时间,结束时间不能小于开始时间
- Silverlight DateTimePicker 自定义的日期及时间选择控件
- 【jQuery日期处理】选择开始时间,自动结束时间
- 选择日期范围,同时要判断选择的开始日期和结束日期的选择是否正确
- js前台判断开始时间是否小于结束时间
- Bootstrap datetimepicker “dp.change” 时间/日期 选择事件
- jquery easyui 对于开始时间小于结束时间的判断示例
- DateTimePicker 选择时间 进行查询,用到的日期格式[格式转自网上]
- my97datepicker开始日期小于结束日期格式化时间精确届时分秒
- 前台判断开始时间是否小于结束时间
- jquery时间转换 时间戳转换 ,jquery 开始时间必须小于结束时间判断,jquery时间判断 。
- bootstrap-datetimepicker 进一步跟进~~~开始时间和结束时间的样式显示
- js判断开始时间不能小于结束时间
- jquery easyui 对于开始时间小于结束时间的判断
- jquery easyui 对于开始时间小于结束时间的判断示例
- 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题