layui 设置时间控件最大值和最小值layui 实现时间控件联动效果 layui 实现时间控件联动效果一、通过 re

一、通过 remove 方法

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script src="https://www.layuicdn.com/layui/layui.js"></script>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  <style>
    #start_date_icon,#end_date_icon{
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -15px;
      cursor: pointer;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div>
      <div class="layui-input-inline" id="myd1">
          <input type="datetime" id="start_date" name="start_date"  lay-verify='date' class="layui-input"/>
          <i class="layui-icon layui-icon-date" id="start_date_icon"></i>
      </div>
      <div class="layui-input-inline" id="myd2">
          <input type="datetime" id="end_date" name="end_date"  lay-verify='date' class="layui-input"/>
          <i class="layui-icon layui-icon-date" id="end_date_icon"></i>
      </div>
  </div>
  
  <script type="text/javascript">
    layui.use(['laydate'], function() {
      var laydate = layui.laydate //日期
      
      var removeStart = function(value,date){
          $("#start_date").remove();
          $("#myd1").append('<input type="datetime" id="start_date" name="start_date"  lay-verify="date" class="layui-input"/>');
          var limitValue = value.replace('.', '-').replace('.', '-');
          laydate.render({
            elem: '#start_date',
            eventElem: '#start_date_icon',
            trigger: 'click',
            format: 'yyyy.MM.dd',
            max:limitValue,
          })
        }
      
      var removeEnd = function(fuck,date){
          console.log('fuck',fuck)
          $("#end_date").remove();
          $("#myd2").append('<input type="datetime" id="end_date" name="end_date"  lay-verify="date" class="layui-input"/>');
          var limitValue = fuck.replace('.', '-').replace('.', '-');
          laydate.render({
            elem: '#end_date',
            format: 'yyyy.MM.dd',
            eventElem: '#end_date_icon',
            trigger: 'click',
            min:limitValue,
          })
        }
      
      laydate.render({
        elem: '#start_date',
        eventElem: '#start_date_icon',
        trigger: 'click',
        type:'date',
        value:'2023.1.1',  // 若不添加 type 属性，只添加 value 和 format 时，无法设置 min/max。
        format: 'yyyy.MM.dd',
        done:removeEnd
      });
      
      laydate.render({
        elem: '#end_date',
        eventElem: '#end_date_icon',
        type:'date',
        value:'2023.2.1',   
        format: 'yyyy.MM.dd',
        trigger: 'click',
        done:removeStart
      })
      
    });  
  </script>
</body>
</html>

二、通过 config 方法

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script src="https://www.layuicdn.com/layui/layui.js"></script>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  <style>
    #start_date_icon,#end_date_icon{
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -14px;
      cursor: pointer;
      font-size: 30px;
    }
  </style>
</head>
<body>
    <div>
        <div class="layui-input-inline" id="myd1">
          <input type="datetime" id="start_date" name="start_date"  lay-verify='date' class="layui-input"/>
          <i class="layui-icon layui-icon-date" id="start_date_icon"></i>
        </div>
        <div class="layui-input-inline" id="myd2">
          <input type="datetime" id="end_date" name="end_date"  lay-verify='date' class="layui-input"/>
          <i class="layui-icon layui-icon-date" id="end_date_icon"></i>
        </div>
    </div>

    <script type="text/javascript">
        layui.use(['laydate'], function() {
          var laydate = layui.laydate
           
          // laydate。render 只会执行一次，所以要将其赋值给一个变量，以方便更改其 config。
          var start = laydate.render({
            elem: '#start_date',
            eventElem: '#start_date_icon',
            type:'date',
            format: 'yyyy.MM.dd',
            value:'2023.1.1',
            min:"2013-08-18",
            max:"2099-06-16",
            trigger: 'click',
            done: function (value, dates) { 	              
                    end.config.min ={
                             year:dates.year, 
                             month:dates.month-1, //关键
                             date: dates.date, 
                             hours: 0, 
                             minutes: 0, 
                             seconds : 0
                    };    
                }
          });

          var end = laydate.render({
            elem: '#end_date',
            eventElem: '#end_date_icon',
            type:'date',
            format: 'yyyy.MM.dd',
            value:'2023.2.1',
            min:"2013-08-18",
            max:"2099-06-16",
            trigger: 'click',
            done: function (value, dates) { 	              
                    start.config.max ={
                             year:dates.year, 
                             month:dates.month-1, //关键
                             date: dates.date, 
                             hours: 0, 
                             minutes: 0, 
                             seconds : 0
                    };    
                }
          })
      
    });
    </script>
</body>
</html>