layui时间范围选择

html

				 <div class="layui-inline">
                        <label class="layui-form-label">时间范围:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="s_date" id="s_date" autocomplete="off" value="" placeholder="请选择时间范围" style="width: 180px;" class="layui-input">
                        </div>
                    </div>

js代码

<script>
  layui.use(['form', 'layedit', 'laydate', 'table', 'element'], function () {
    
    
    var form = layui.form,//表单
            $ = layui.$,//jquery
            table = layui.table,//表格
            layer = layui.layer,//基础
            laypage = layui.laypage,//分页
            laydate = layui.laydate,//日期
            util = layui.util,
             excel = layui.excel;//导出表格
         var myDate = new Date();//获取当前时间设置选择时间的范围
        var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());//拼接当前是时间

		 //初始化选择时间控件
        laydate.render({
    
    
            elem: '#s_date'
            , type: 'date'
            , range: '~'
            , max: maxtime//设置选择最大时间为当前
            , calendar: true
            , btns: ['clear', 'confirm', 'now']
            , done: function (value, date) {
    
    
                //这里时选中后触发事件
                //value是选中的值
                var time = value;
              
            }
        });

  });
</script>

效果图

在这里插入图片描述

Guess you like

Origin blog.csdn.net/qq_42455262/article/details/119892834