提问者:小点点

灵活扩展bootstrap datepicker函数


我正在开发基于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()

            });

    });

我怎样才能做到这一点?


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

});​

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