需求:当用户选择开始日期的时候,结束日期要小于开始日期。
遇到的问题:
当切换开始时间时,结束时间的输入框不会被重新渲染。
解决:
html代码:
<div class="layui-form-item">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="请选择开始时间" id="startTime" name="startTime">
</div>
</div>
<div class="layui-form-item expireTime" style="display: flex;align-items: center;">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-inline" id="endTimeBox">
<input type="text" class="layui-input" placeholder="请选择结束时间" id="endTime" name="endTime">
</div>
</div>
js代码:
let startInitTime = '' // 初始化开始时间
let endInitTime = '' // 初始化结束时间
// 开始时间初始渲染
laydate.render({
elem: '#startTime'
,value: startInitTime,
done: function(value, date, endDate){ // 更改开始时间后的回调
// 移除当前的dom元素,重新进行元素的插入
$('#endInitTime').remove()
$('#endInitTimeBox').html(`<input type="text" class="layui-input" placeholder="请选择结束时间" id="endTime" name="endTime">`)
// 重新渲染结束时间
laydate.render({
elem: '#endTime',
min: payDate,
value //必须遵循format参数设定的格式
});
form.render()
}
});
form.render();