使用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');
