layui时间控件选择时间范围

最新推荐文章于 2025-06-18 15:09:18 发布

戴桥冰

最新推荐文章于 2025-06-18 15:09:18 发布

阅读量2.4w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： layui js 文章标签： html layui

本文链接：https://blog.youkuaiyun.com/qq_21178933/article/details/78581206

layui 同时被 2 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

该博客详细介绍了如何解决layui时间控件在清空后无法正常使用的两种方法，分别适用于layui 1.x和2.x版本。内容包括对应的HTML和JavaScript代码实现。

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

解决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">
              <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代码

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;
        }
    });