layui 时间插件laydate中动态设置改变min和max值

bai_riqiang

于 2018-04-27 16:45:03 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui laydate laydate

本文链接：https://blog.youkuaiyun.com/bai_riqiang/article/details/80110000

layui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用layui的laydate日期选择器实现起始时间和结束时间的联动效果，确保选择的时间区间合法有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 申请时间 -->
        <div class="layui-inline">
          <label class="layui-form-label">申请时间</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" id="timeStart" placeholder=" - ">
          </div>
          至
          <div class="layui-input-inline">
            <input type="text" class="layui-input" id="timeEnd" placeholder=" - ">
          </div>
        </div>

layui.use('laydate', function(){
  var laydate = layui.laydate;
  var startDate = laydate.render({
    elem: '#timeStart'
    ,max:"2099-12-31"
    ,done: function(value, date){
      endDate.config.min ={  
        year:date.year,   
        month:date.month-1,   
        date: date.date
      };   
    }
  });
  var endDate = laydate.render({
    elem: '#timeEnd'
    ,min:"1970-1-1"
    ,done: function (value, date) {  
      startDate.config.max={  
        year:date.year,   
        month:date.month-1,  
        date: date.date
      }  
    }  
  });
})

其实很简单，就是在选择时间后重新设置一下起始时间或截止时间的最小值和最大值，保证截止时间必须是在起始时间之后，起始时间必须早于截止时间

注意：设置月份时需要减一