layui时间控件选择时间范围

最新推荐文章于 2023-12-18 16:44:23 发布

weixin_33994444

最新推荐文章于 2023-12-18 16:44:23 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/pzx-java/p/8892798.html

本文介绍了一个使用layui框架实现的日期选择器联动功能，通过两个日期输入框实现开始日期与截止日期的有效联动，确保截止日期不会早于开始日期，并提供了具体的JavaScript代码实现。

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

    layui.use([ 'laydate'], function(){
        var $ = layui.$;
        var laydate = layui.laydate;
        var max = ${nowYear}+"-12-31";
        var min = ${nowYear}+"-1-1";
        var start = laydate.render({
               elem: '#searchJhksrq',
            type: 'date',
            max: max,
            min: min,
            showBottom: false,
            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: '#searchJhjzrq',
            type: 'date',
            max: max,
            min: min,
            showBottom: false,
            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;
            }
        });
    });

         开始日期:
       <input type="text" class="input-text" style="width: 200px" placeholder="开始日期" name="jhksrq" id="searchJhksrq" readonly="readonly" >
       截止日期:
       <input type="text" class="input-text" style="width: 200px" placeholder="截止日期" name="jhjzrq" id="searchJhjzrq" readonly="readonly" >