bootstrap datepicker 时间控件动态设置时间范围

最新推荐文章于 2025-11-24 06:22:17 发布

原创最新推荐文章于 2025-11-24 06:22:17 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #jquery

JAVA WEB菜鸟专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用日期选择器确保开始时间不晚于结束时间的方法。通过在开始时间和结束时间输入框中设置相互依赖的最大和最小日期，实现时间范围的有效控制。

需求：开始时间不能大于结束时间；结束时间不能小于开始时间

处理思路：

1、开始时间增加点击事件，设置最大时间（endDate）值为结束时间的值

2、同理结束时间增加点击事件，设置最小时间(startDate)值为结==开始时间的值

效果：

代码：

<label class="col-lg-1 col-md-2 control-label" style="width: 90px">统计周期:</label>
<div class="col-lg-2 col-md-4">
    <div class="input-group">
        <input type="text" class="form-control input-sm" id="wdjxKssj" name="queryDate" readonly="readonly">
        <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
        </div>
    </div>
</div>
<label class="col-lg-1 col-md-2 control-label" style="width: 5px;padding-left: 0px;">-</label>
<div class="col-lg-2 col-md-4">
    <div class="input-group">
        <input type="text" class="form-control input-sm" id="wdjxJssj" name="queryDate" readonly="readonly">
        <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
        </div>
    </div>
</div>

function initWdjxCxsj(){
    $('#wdjxKssj').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight : true,
        startDate: new Date().getFullYear()+'-01-01',
        endDate : new Date()
    }).on("click",function(){
        $("#wdjxKssj").datepicker("setEndDate",$("#wdjxJssj").val())
    });
    $('#wdjxJssj').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight : true,
        startDate: new Date().getFullYear()+'-01-01',
        endDate : new Date()
    }).on("click",function(){
        $("#wdjxJssj").datepicker("setStartDate",$("#wdjxKssj").val())
    });
}