layui 日期不能重新渲染

需求:当用户选择开始日期的时候,结束日期要小于开始日期。

遇到的问题:

当切换开始时间时,结束时间的输入框不会被重新渲染。

解决:

html代码:
javascript 复制代码
<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代码:
javascript 复制代码
 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();
相关推荐
弓.长.4 小时前
React Native 鸿蒙跨平台开发:实现一个多功能单位转换器
javascript·react native·react.js
南半球与北海道#4 小时前
前端打印(三联纸票据打印)
前端·vue.js·打印
摘星编程4 小时前
React Native for OpenHarmony 实战:ToggleSwitch 切换开关详解
javascript·react native·react.js
董世昌414 小时前
深入浅出 JavaScript 常用事件:从原理到实战的全维度解析
前端
满栀5854 小时前
分页插件制作
开发语言·前端·javascript·jquery
qq_406176145 小时前
深入剖析JavaScript原型与原型链:从底层机制到实战应用
开发语言·前端·javascript·原型模式
弓.长.5 小时前
React Native 鸿蒙跨平台开发:BottomSheet 底部面板详解
javascript·react native·react.js
开开心心_Every5 小时前
免费窗口置顶小工具:支持多窗口置顶操作
服务器·前端·学习·macos·edge·powerpoint·phpstorm
摘星编程5 小时前
React Native for OpenHarmony 实战:Permissions 权限管理详解
javascript·react native·react.js
闲蛋小超人笑嘻嘻6 小时前
Vue 插槽:从基础到进阶
前端·javascript·vue.js