灵活扩展bootstrap datepicker函数

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中为您整理了这些内容，希望它能满足您的需求。需要注意的是，有一个setstartdate函数，如果您希望在初始化后更新最小日期，您应该在datepicker上使用它。

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());
    }

});​

或者，这里有一个日期范围选择器，可以在这里找到。