layui时间控件选择时间范围

解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择

共有两种解决方式:

方式一(layui 1.x):

html代码:
<div class="layui-inline">
   <div class="layui-input-inline">
           <input type="text" name="start_time" class="layui-input" id="start_time" 
                  placeholder="开始时间(修改时间)">
     div>
 div>
 <div class="layui-inline">
     <div class="layui-input-inline">
         <input type="text" name="end_time" class="layui-input" id="end_time" 
                 placeholder="结束时间(修改时间)">
     div>
 div>
js代码:
  var start = {
      istime: true,
      format: 'YYYY-MM-DD hh:mm:ss',
      max: '2099-06-16 23:59:59',
      istoday: true,
      choose: function (datas) {
          end.min = datas; //开始日选好后,重置结束日的最小日期
      }
  };

  var end = {
      istime: true,
      format: 'YYYY-MM-DD hh:mm:ss',
      max: '2099-06-16 23:59:59',
      istoday: true,
      choose: function (datas) {
          start.max = datas; //结束日选好后,重置开始日的最大日期
      }
  };

  document.getElementById('start_time').onclick = function () {
      start.elem = this;
      laydate(start);
  };
  document.getElementById('end_time').onclick = function () {
      end.elem = this;
      laydate(end);
  };

方式二(layui 2.x):

html代码
<div class="layui-inline">
        <div class="layui-input-inline">
              "text" name="start_time" class="layui-input" id="start_time" 
                     placeholder="开始时间(修改时间)">
        div>
    div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            "text" name="end_time" class="layui-input" id="end_time" 
                    placeholder="结束时间(修改时间)">
        div>
    div>
js代码
layui.use([ 'laydate'], function(){
    var $ = layui.$;
    var laydate = layui.laydate;
    var nowTime = new Date().valueOf();
    var max = null;

       var start = laydate.render({
        elem: '#start_time',
        type: 'datetime',
        max: nowTime,
        btns: ['clear', 'confirm'],
        done: function(value, date){
            endMax = end.config.max;
            end.config.min = date;
            end.config.min.month = date.month -1;
        }
    });
    var end = laydate.render({
        elem: '#end_time',
        type: 'datetime',
        max: nowTime,
        done: function(value, date){
            if($.trim(value) == ''){
                var curDate = new Date();
                date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
            }
            start.config.max = date;
            start.config.max.month = date.month -1;
        }
    });

你可能感兴趣的:(layui,js)