在使用laydate中 ,要求结束时间不能小于开始时间,在选择器中,不能选择部分置灰。 根据layui文档无法满足此要求(laydate.render只渲染一次);
解决思路:
1.在每次选择初始时间后,进行判断;
2.删除结束时间input标签,使laydate.render能够重新渲染;
代码如下
html部分
<div class="layui-form-item">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" name="prostarttime" lay-verType="tips" lay-verify="required" id="startTime" autocomplete="off" class="layui-input">
</div>
<span style="color: #ca1e22;">*</span>
</div>
<div class="layui-form-item">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-inline end-time">
<input type="text" name="proendtime" lay-verType="tips" lay-verify="required|endTime" id="endTime" autocomplete="off" class="layui-input">
</div>
<span style="color: #ca1e22;">*</span>
</div>
js部分
layui.use(['table', 'jquery', 'form'], function() {
var table = layui.table,
form = layui.form,
$ = layui.jquery,
laydate = layui.laydate;
// 出发起始时间
$("#startTime").on("click", function() {
laydate.render({
elem: '#startTime',
trigger: 'click',
show: true,
done: function(value) {
let endTime = $("#endTime").val();
if(endTime != "" && endTime >= value){
flushEndTime(value,endTime);
}else{
flushEndTime(value);
}
}
});
});
/*
* min: 最小值
* isInitValue:初始值
*/
function flushEndTime(min,isInitValue) {
$(".end-time").empty() ; // 删除原有时间选择器
let _html = '<input type="text" name="proendtime" lay-verType="tips" lay-verify="required|endTime" id="endTime" autocomplete="off" class="layui-input">';
$(".end-time").html(_html); // 添加新的选择器
// 加载
laydate.render({
elem: '#endTime',
trigger: 'click',
min: min,
isInitValue:true,
value: isInitValue
});
}
$("#endTime").on("click", function() {
if($("#startTime").val() == '') {
layer.msg("请选择开始时间");
return false;
}
});
}