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);
});