layui 关于layDate设置时间限制问题

前面是尝试结果，有兴趣的可以康康，赶时间的可以直接翻到底下 ----->直达车

因为只有一个页面，没什么标准，所以自己就使用了layui的时间控件，并且作为独立组件。

第一次尝试 - 使用 min

一开始只想让结束时间有个时间限制，就是结束时间在开始时间后面。直接在结束时间的控件上添加了 min 属性，可想而知：

1. 在结束时间控件上添加了 min 属性，与开始时间没有关联；
2. 每次打开结束时间控件，可选择的值都是 min 之后的值；

<div class="timeOrange-input">            
  <input type="text" class="ind2 cloneStart" id="startTime" placeholder="开始时间" autocomplete="off" readonly>
  <span> - </span>
  <input type="text" class="ind2 cloneEnd" id="endTime" placeholder="结束时间" autocomplete="off" readonly>
</div>
<script>
var params = {   //请求参数
  date: "",
  devId: "",
  startTime: "",
  endTime: ""
}; 
laydate.render({
  elem: '#startTime', //指定元素
  type: 'time',
  format:'HH:mm',
  done: function(value,date){
    params.startTime = value;   
  }
});
laydate.render({
  elem: '#startTime', //指定元素
  type: 'time',
  format:'HH:mm',
  min: "00:00:00"
  done: function(value,date){
    params.startTime = value;   
  }
});
</script>

第二次尝试 - 使用 ready

Layui 中有个 ready 回调函数，它是控件初始打开的回调。就想可不可以一打开这个控件时间限制就已经被加进去了。

<script>
laydate.render({
  elem:'#endTime',
  type: "time",
  format:'HH:mm',
  ready: function(date){
    console.log(this,date)
    //this.dateTime记录了当前的年、月、日，
    //因为原来的min是从 1900年1月1日 开始的，如果不设置当前的日期，
    //控制的hours/minutes/seconds就是1990年那天的最小值
    this.min = {
      year: this.dateTime.year,  
      month: this.dateTime.month,
      date: this.dateTime.date,
      hours: parseInt(params.startTime.split(":")[0]),
      minutes: parseInt(params.startTime.split(":")[1]),
      seconds: 0
    }
  done: function(value, date){
    params.endTime = value; 
  }
});
</script>

此时可以发现，第一次点击时不产生效果，但是第二次生效了！

这是因为 ready 是控件在打开时触发，也就是打开控件后给控件设置操作，而不是在控件打开之前触发。当第一次打开控件时，min 还没有被设置，我们在 ready 中设置了控件的 min 值，第二次打开控件，此时min已经被设置了。

第三次尝试 - 在开始时间控件中设置结束时间的 min值

layDate 中的 done 是控件选择完毕后的回调，点击日期、清空、现在、确定均会触发该函数。
参考吕一

<script>
laydate.render({
  elem: '#startTime', //指定元素
  type: 'time',
  format:'HH:mm',
  max: '23:59:59',
  done: function(value, date){
    params.startTime = value; 
    //不清楚对象里面的属性，可以通过查看对属性值进行改写
    console.log(endT.config.min); 
    endT.config.min = {
      year: date.year,
      month: date.month -1,
      date: date.date,
      hours: date.hours,
      minutes: date.minutes,
      seconds: 0
    }
  }
});

var endT = laydate.render({
  elem:'#endTime',
  type: "time",
  format:'HH:mm',
  done: function(value, date){
    params.endTime = value; 
  }
});
</script>

满足我想要的效果，但是选择完结束时间后，再去选择开始时间，因为开始时间没有做限制，重新选择时可以选择到 在结束时间后的时间，所以给开始时间和结束时间都做了限制。

结束 - 参考月生三州

开始时间和结束时间相互限制。

<script>
var startT = laydate.render({
  elem: '#startTime', //指定元素
  type: 'time',
  format:'HH:mm',
  max: '23:59:59',
  done: function(value, date){
    params.startTime = value; 
    endT.config.min = {  //给结束时间设置最小值
      year: date.year,
      month: date.month -1,
      date: date.date,
      hours: date.hours,
      minutes: date.minutes,
      seconds: 0
    }
  }
});

var endT = laydate.render({
  elem:'#endTime',
  type: "time",
  format:'HH:mm',
  done: function(value, date){
    params.endTime = value; 
    startT.config.max = {  //给开始时间设置最大值，让开始时间<结束时间
      year: date.year,
      month: date.month -1,  //设置月份时需要减一
      date: date.date,
      hours: date.hours,
      minutes: date.minutes,
      seconds: 0
    }
  }
});
</script>

注意：上面这个动图是在结束时间的 done 中设置 startT.config.min的效果。