boostrap的日期选择:datetimepicker 做 开始时间与 结束时间的判断,开始时间小于结束时间
程序员文章站
2022-07-15 14:06:27
...
JQuery 和 bootstrap 插件自己导入,这里直接上代码:
这里 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);
});
上一篇: 初创企业的十大盈利模式
推荐阅读
-
laydate 显示结束时间不小于开始时间的实例
-
boostrap的日期选择:datetimepicker 做 开始时间与 结束时间的判断,开始时间小于结束时间
-
js判断开始时间与结束时间不大于24小时的解决方案
-
jquery easyui 对于开始时间小于结束时间的判断示例
-
PHP取得指定日期的 星期的开始时间 结束时间
-
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
-
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
-
JQuery的datetimepicker插件,限制开始时间小于等于结束时间的方法
-
vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间
-
jquery easyui 对于开始时间小于结束时间的判断示例_jquery