layui-日期控件

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

原创最新推荐文章于 2025-06-18 15:09:18 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#控件 #layui #laydate

Layui 专栏收录该内容

13 篇文章

订阅专栏

layui-日期控件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>日期</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <blockquote class="layui-elem-quote">目前Layui中的日期组件还是layDate 1.1的改良版，它后续将会进行一次重写。</blockquote>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>顺便列举几个常用例子</legend>
        </fieldset>
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
        <label class="layui-form-label">范围选择</label>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
        </div>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
        </div>
        </div>
        </div>

        <script src="layui/layui.js"></script>
        <script>
layui.use('laydate', function(){

  var laydate = layui.laydate;

  var start = {
    min: laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      end.min = datas; //开始日选好后，重置结束日的最小日期
      end.start = datas //将结束日的初始值设定为开始日
    }
  };

  var end = {
    min: laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      start.max = datas; //结束日选好后，重置开始日的最大日期
    }
  };

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

});
</script>

    </body>
</html>

这里写图片描述

官网日期控件