layui 时间选择器

最新推荐文章于 2024-08-22 17:29:05 发布

信晨阳

最新推荐文章于 2024-08-22 17:29:05 发布

阅读量3.8k

点赞数

分类专栏：笔记文章标签： layui javascript webview

本文链接：https://blog.csdn.net/weixin_61644572/article/details/123580879

版权

笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍如何使用layui插件实现日期范围选择器，用户可以设置开始和结束时间，确保开始时间小于等于结束时间。通过laydate库，日期限制在当前时间到未来4073558400000毫秒内，适合用于时间区间筛选应用。

摘要由CSDN通过智能技术生成

<div class="layui-col-xs8">
    <div class="layui-inline">
        <label>开始时间</label>
        <div class="layui-input-inline">
            <input type="text" name="begin" class="layui-input" id="start_time" placeholder="开始时间(修改时间)">
        </div>
    </div>
    -
    <div class="layui-inline">
        <label>结束时间</label>
        <div class="layui-input-inline">
            <input type="text" name="end" class="layui-input" id="end_time"  placeholder="结束时间(修改时间)">
        </div>
    </div>
</div>

<script type="text/javascript">
    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',
            format:'yyyy/MM/dd',
            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:  4073558400000,
            format:'yyyy/MM/dd',
            min: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;
            }
        })
    })
</script>