使用laydate控件,有開始時間和結束時間,開始時間最大值選擇小於結束時間。
當formate為年月日時分秒是,用以下用法初始化時沒有問題,用法如下:
var startDate;
var endDate;
if ($("#history-time").length > 0) {
layui.use('laydate', function () {
var laydate = layui.laydate;
startDate = laydate.render({
elem: '#startTime',
max: $('#endTime').val(),
theme: 'molv',
trigger: 'click',
type: 'datetime',
min: '2019-01-01 00:00:00',
done: function (value, date) {
// 結束時間大於開始時間
if (value !== '') {
endDate.config.min.year = date.year;
endDate.config.min.month = date.month - 1;
endDate.config.min.date = date.date;
endDate.config.min.hours = date.hours;
endDate.config.min.minutes = date.minutes;
endDate.config.min.seconds = date.seconds;
} else {
endDate.config.min.year = '';
endDate.config.min.month = '';
endDate.config.min.date = '';
endDate.config.min.hours = '';
endDate.config.min.minutes = '';
endDate.config.min.seconds = '';
}
}
});
endDate = laydate.render({
elem: '#endTime',
min: $('#startTime').val(),
theme: 'molv',
trigger: 'click',
type: 'datetime',
done: function (value, date) {
// 開始時間小於結束時間
if (value !== '') {
startDate.config.max.year = date.year;
startDate.config.max.month = date.month - 1;
startDate.config.max.date = date.date;
startDate.config.max.hours = date.hours;
startDate.config.max.minutes = date.minutes;
startDate.config.max.seconds = date.seconds;
} else {
startDate.config.max.year = '';
startDate.config.max.month = '';
startDate.config.max.date = '';
startDate.config.max.hours = '';
startDate.config.max.minutes = '';
startDate.config.max.seconds = '';
}
}
});
});
}
//進入頁面時填充時間
$('#startTime').val('2020-11-02 14:00:00');
$('#endTime').val('2020-11-02 14:30:00');
但是當format: 'yyyy-MM-dd HH',此時初始化時開始時間和結束時間總是不能正確判斷小時值的選擇范圍。
解決辦法:在初始化后,發現startDate.config.max=‘2020-11-02 14’,之后拼接上‘00:00’,這樣初始化時可正確識別范圍。
var startDate;
var endDate;
if ($("#history-time").length > 0) {
layui.use('laydate', function () {
var laydate = layui.laydate;
startDate = laydate.render({
elem: '#startTime',
max: $('#endTime').val(),
theme: 'molv',
trigger: 'click',
type: 'datetime',
min: '2019-01-01 00',
format: 'yyyy-MM-dd HH',
done: function (value, date) {
// 結束時間大於開始時間
if (value !== '') {
endDate.config.min.year = date.year;
endDate.config.min.month = date.month - 1;
endDate.config.min.date = date.date;
endDate.config.min.hours = date.hours;
} else {
endDate.config.min.year = '';
endDate.config.min.month = '';
endDate.config.min.date = '';
endDate.config.min.hours = '';
}
}
});
endDate = laydate.render({
elem: '#endTime',
min: $('#startTime').val(),
theme: 'molv',
trigger: 'click',
type: 'datetime',
format: 'yyyy-MM-dd HH',
done: function (value, date) {
// 開始時間小於結束時間
if (value !== '') {
startDate.config.max.year = date.year;
startDate.config.max.month = date.month - 1;
startDate.config.max.date = date.date;
startDate.config.max.hours = date.hours;
} else {
startDate.config.max.year = '';
startDate.config.max.month = '';
startDate.config.max.date = '';
startDate.config.max.hours = '';
}
}
});
//初始化時小時范圍確定 重要
startDate.config.max=startDate.config.max+':00:00';//變成'2020-11-02 14:00:00'后可正確識別選擇范圍
endDate.config.min=endDate.config.min+':00:00';
});
}
//進入頁面時填充時間
$('#startTime').val('2020-11-02 14');
$('#endTime').val('2020-11-02 14');
