Bootstrap Datepicker 设置最小范围

Question

我们正在使用 Bootstrap Datepicker (https://github.com/uxsolutions/bootstrap-datepicker) 来设置签入和签出日期。

我们需要能够在日期选择器上为具有最短住宿时间的酒店设置“最小范围”。

缺少要求：

• 不允许 # 晚数少于酒店每晚的最小值。
• 不允许结帐日期早于签入日期。

因此，如果访客选择入住日期为 2017 年 12 月 1 日，并且酒店的最低住宿晚数为 3 晚，则不应允许访客选择 2017 年 2 月 12 日、2017 年 3 月 12 日.下一个可供他们结账的夜晚应该是 2017 年 12 月 4 日。

我没有看到这个日期选择器是一个简单的选项。我确实看到它已被很多人添加为功能请求。 https://github.com/uxsolutions/bootstrap-datepicker/issues/970

我已经通过使用 disabledDates 和 setDatesDisabled 日期构建了可能工作的开始。但是，我似乎无法弄清楚为什么在选择新的开始日期时这些 disabledDates 不起作用或触发。我认为我应该能够将新设置的禁用日期与已发布的日期结合起来。

$(function($) {

    var today = new Date();
    $('.input-daterange').datepicker({
      daysOfWeekHighlighted: "0,6",
      autoclose: true,
      todayHighlight: true,
      startDate: today,
      datesDisabled: ['10/1/2017','10/2/2017','10/3/2017','10/4/2017','10/5/2017','10/6/2017','10/7/2017','10/8/2017','10/9/2017','10/10/2017','10/11/2017','10/12/2017','10/13/2017','10/14/2017','10/15/2017','10/16/2017','10/17/2017','10/18/2017','10/19/2017','10/20/2017','10/21/2017','10/22/2017','10/23/2017','10/24/2017','10/25/2017','10/26/2017','10/27/2017','10/28/2017','10/29/2017','10/30/2017','10/31/2017'],
    });

});

// Set end date to minimum nights.
$('#start').on('change', function() {

    // Set minNights.
    minNights = 3;

    start = $('#start').datepicker('getDate');
    end = moment(start).add(minNights, 'day').toDate();
    $('#end').datepicker('update', end);

    $('.input-daterange').datepicker('setDatesDisabled', [  $('.input-daterange').datepicker('setDatesDisabled', ['12/02/2017', '12/03/2017']);]);

});

是否还有其他内置日期选择器？或者，是否有一种简单而干净的方法可以将上述缺失的要求添加到引导日期选择器中？

简单的 JSFiddle

• https://jsfiddle.net/riverecho/omd5uw21/

Answer 1

试试这个

$(function () {
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
yearRange: '1999:2012',
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        minDate: new Date(1999, 10 - 1, 25),
        maxDate: '+30Y',
        inline: true
    });
});