Question

我正在使用基于Twitter Bootstrap的日期选择器，它使用来自https://github.com/eternicode/bootstrap-datepicker的日期选择器。

我想扩展一些类似的功能，允许用户选择2个日期，并在更改时更新以后的日历

选择出发日期
返回日期：在出发日期之前禁用所有日期选择因此返回日期始终保持在出发日期之前。

目前使用以下内容，但只能使用一次......


$("#depart_date").datepicker(dp)
    .on('changeDate',function(ev){


        $("#return_date").datepicker({
                format:defaultDateFormat,
                autoclose:true,
                startDate: $("#depart_date").val()

            });

    });

我怎么能实现这个目标？

Answer 1

我在jsFiddle中put this together for you，希望它符合您的要求。需要注意的是，如果要在初始化后更新最小日期，则应在日期选择器中使用函数setStartDate。

<强> HTML

<input type="text" class="span2" value="02-16-2012" id="depart-date">
<input type="text" class="span2" value="02-16-2012" id="return-date">

<强>的JavaScript

$(function() {

    // create the departure date
    $('#depart-date').datepicker({
        autoclose: true,
        format: 'mm-dd-yyyy',
    }).on('changeDate', function(ev) {
        ConfigureReturnDate();
    });


    $('#return-date').datepicker({
        autoclose: true,
        format: 'mm-dd-yyyy',
        startDate: $('#depart-date').val()
    });

    // Set the min date on page load
    ConfigureReturnDate();

    // Resets the min date of the return date
    function ConfigureReturnDate() {
         $('#return-date').datepicker('setStartDate', $('#depart-date').val());
    }

});

或者，有一个人可以找到的日期范围选择器here。

巧妙地扩展bootstrap datepicker功能

1 个答案: