1

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

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

  • 选择出发日期
  • 返回日期：禁用选择出发日期之前的所有日期，以便返回日期始终保持在出发日期之前。

目前使用以下，但它只工作一次......

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


        $("#return_date").datepicker({
                格式：默认日期格式，
                自动关闭：真，
                开始日期：$("#depart_date").val()

            });

    });

我怎么能做到这一点？

4

1 回答 1

2

我已经在 jsFiddle 中为您整理了这些内容，希望它能够满足您的要求。需要注意的是，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());
    }

});​

或者，可以在此处找到某人制作的日期范围选择器。

于 2012-12-21T12:35:16.100 回答