layui date cannot be re-rendered

Requirement: When the user selects the start date, the end date must be smaller than the start date.

Insert image description here

Problems encountered:

When switching the start time, the end time input box will not be re-rendered.

solve:

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();

Guess you like

Origin blog.csdn.net/Y1914960928/article/details/135238910