需求:当用户选择开始日期的时候,结束日期要小于开始日期。
遇到的问题:
当切换开始时间时,结束时间的输入框不会被重新渲染。
解决:
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();