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();
相关推荐
cpolar技术支持3 分钟前
本地 Playwright 测试报告怎么远程复盘?Trace Viewer 跑起来后,用 cpolar 分享失败现场
前端·自动化测试·测试工具·cpolar·playwright
wordbaby3 分钟前
企业级后台管理系统路由设计与最佳实践指南
前端
胡志辉的博客12 分钟前
【完全开源】IP 纯净度检测 可一键部署到自己的CF
前端·javascript·chrome·ip·chromium
Hilaku38 分钟前
作为面试官,我最怕遇到什么样的候选人?
前端·javascript·程序员
TiDi1 小时前
Pinia优化重复请求
前端
web3d5201 小时前
01-用 Leafletjs 10 分钟搭一张水利一张图(Vue3 + Vite 实战)
前端·javascript
晚安日记wanna1 小时前
Vue2 的 defineProperty 差在哪四层追问筛掉九成候选人
前端·vue.js·面试
TiDi1 小时前
吸顶导航交互实现
前端
kisshyshy1 小时前
从Props透传到自定义Hook:系统梳理React跨层级通信与逻辑复用
前端·架构·代码规范
yume_sibai2 小时前
05-Flutter实战项目
前端·flutter