layui.laydate开始时间与结束时间间隔30天

layui.laydate开始时间与结束时间间隔30天,第1张

layui.layuidate的实现需满足以下3点:

选择开始时间后,点击确定,开始时间显示选择设置结束时间:(结束时间范围: [选择的开始时间+30 备注:最远可选择的是第30天,可以在30内进行其他日期的选择)如果修改开始时间,结束时间自动清空。

刚开始写的时候,我的问题主要是:再次修改开始日期的时候,那个结束的日期范围就没有更新。

解决方法是:切换选择开始日期后删除结束日期元素,再次添加新的元素。

$("#dateChangeEnd").remove();
$(".date-text").after(
'')

完整代码如下:
html:

   <div class="qrcode-right-list qrcode-time">
        <input type="text" class="layui-input" style="width: 260px;margin-right: 10px;" lay-verify="required" id="dateChangeStart" name="startTime" />
        <span class="date-text">至:span>
        <input type="text" class="layui-input" style="width: 260px;margin-left: 10px;" lay-verify="required" id="dateChangeEnd" name="endTime" />
      div>

js:

    // 开始日期结束日期
    laydate.render({
      elem: '#dateChangeStart',
      type: 'datetime',
      min: 0,  //最小是当天的日期
      format: 'yyyy-MM-dd HH:mm:ss',
      trigger: 'click',
      done: function (value, date, endDate) {
        $("#dateChangeEnd").remove();
        $(".date-text").after(
        '')
        console.log("初次选择是否会触发",value,getMinDate(value));
          laydate.render({
          elem: '#dateChangeEnd',
          trigger: 'click',
          type: 'datetime',
          min:0,
          max:getMinDate(value),
          format: 'yyyy-MM-dd HH:mm:ss',
          trigger: 'click',
          done: function (value, date, endDate) {
            var startDate = $("input[name='startTime']").val();
            if (startDate == value) {
              return layer.msg('开始结束日期不可设置相同');
            } else {
              return true
            }
          }
        }); 
      }
      ,change: function(value, date, endDate){
        $("#dateChangeEnd").val('') 
      }
    });

    // 计算开始时间推迟后30天
    function getMinDate(time){
     console.log(3333,time)
     var date1 = new Date(time);
     var date2 = new Date(date1);
     date2.setDate(date1.getDate() + 30);
     var year = date2.getFullYear();     
     var month = date2.getMonth() + 1 <10 ? `0${date2.getMonth() + 1}` :  date2.getMonth() + 1;  
     var data = date2.getDate() < 10 ? `0${date2.getDate()}` : date2.getDate();        
     var hour = date2.getHours() < 10 ? `0${date2.getHours()}` : date2.getHours();   
     var min = date2.getMinutes() <10 ? `0${date2.getMinutes()}` : date2.getMinutes();  
     var sec = date2.getSeconds() <10 ? `0${date2.getSeconds()}` : date2.getSeconds(); 
     return year + "-" + month + "-" + data + " "+ hour + ":" + min + ":" + sec
    }

  })

效果展示:

如果大家有更好更多的解决方法,欢迎评论区留言😁

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/940928.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表(0条)

保存