layui时间控件回显范围控制
html
<div class="layui-input-inline">
<input type="text" id="effectStartTime" name="effectStartTime" lay-verify="required"
readonly
placeholder="选择开始时间" autocomplete="off" class="layui-input"
style="width: 160px;float: left">
<input type="text" id="effectEndTime" name="effectEndTime" lay-verify="required"
readonly
placeholder="选择结束时间" autocomplete="off" class="layui-input"
style="width: 160px;float: left;margin-left: 30px">
div>
js
//点击日期表单显示日期
var now = new Date()
var effectStartTime = laydate.render({
elem: "#effectStartTime",
type: "datetime",
trigger: "click",
min: (now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' 00:00:00'),
done: function (value, date) { //控件选择完毕后的回调
var start = value;
var end = $('input[name=effectEndTime]').val();
var start1 = new Date(Date.parse(start.replace(/-/g, "/")));
if (start == null || start == '' || start == undefined) {
effectStartTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate(),
};
effectEndTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate() + 1,
};
} else if (start != null && start != '' && start != undefined) {
if (start1 > now) {
effectStartTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate(),
};
effectStartTime.config.max = {
year: start1.getFullYear(),
month: start1.getMonth(),
date: start1.getDate(),
};
effectEndTime.config.min = {
year: start1.getFullYear(),
month: start1.getMonth(),
date: start1.getDate() + 1,
};
} else {
effectStartTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate(),
};
effectStartTime.config.max = {
year: end2.getFullYear(),
month: end2.getMonth() - 1,
date: end2.getDate(),
};
effectEndTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate() + 1,
};
}
if (end != null && end != '' && end != undefined) {
if (start >= end) {
layer.msg("生效日期不能大于或者等于失效日期,请重新输入", {icon: 5});
$('input[name=effectStartTime]').val("");
}
}
}
form.render();
},
});
//点击日期表单显示日期
var effectEndTime = laydate.render({
elem: "#effectEndTime",
type: "datetime",
trigger: "click",
min: (now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' 00:00:00'),
done: function (value, date) { //控件选择完毕后的回调
var start = $('input[name=effectStartTime]').val();
var start1 = new Date(Date.parse(start.replace(/-/g, "/")));
var end = value;
if(end == null || end == '' || end == undefined){
effectStartTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate(),
};
effectStartTime.config.max = {
year: 2099,
month: 12,
date: 31,
};
}else if(end != null && end != '' && end != undefined){
if(start !=null && start !='' && start !=undefined){
if(start1>now){
effectStartTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate(),
};
effectStartTime.config.max = {
year: start1.getFullYear(),
month: start1.getMonth(),
date: start1.getDate(),
};
effectEndTime.config.min = {
year: start1.getFullYear(),
month: start1.getMonth(),
date: start1.getDate() + 1,
};
}else{
effectStartTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate(),
};
effectStartTime.config.max = {
year: end2.getFullYear(),
month: end2.getMonth() - 1,
date: end2.getDate(),
};
effectEndTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate() + 1,
};
}
if (start >= end) {
layer.msg("生效日期不能大于或者等于失效日期,请重新输入", {icon: 5});
$('input[name=effectStartTime]').val("");
}
}
}
form.render();
},
});
//初始化后 laydate无监听时候
var start1 = $('input[name=effectStartTime]').val();
var start2 = new Date(Date.parse(start1.replace(/-/g, "/")));
var end1 = $('input[name=effectEndTime]').val();
var end2 = new Date(Date.parse(end1.replace(/-/g, "/")));
if (start1 != null && start1 != '' && start1 != undefined && end1 != null && end1 != '' && end1 != undefined) {
if (start2 > now) {
effectStartTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate(),
};
effectStartTime.config.max = {
year: start2.getFullYear(),
month: start2.getMonth(),
date: start2.getDate(),
};
effectEndTime.config.min = {
year: start2.getFullYear(),
month: start2.getMonth(),
date: start2.getDate() + 1,
};
} else {
effectStartTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate(),
};
effectStartTime.config.max = {
year: end2.getFullYear(),
month: end2.getMonth() - 1,
date: end2.getDate(),
};
effectEndTime.config.min = {
year: now.getFullYear(),
month: now.getMonth(),
date: now.getDate() + 1,
};
}
}