Bootstrap Datepicker set Minimum Range

Question

We are using Bootstrap Datepicker (https://github.com/uxsolutions/bootstrap-datepicker) to set a checkin and checkout date.

We need to be able to set a 'minimum range' on the date picker for properties that have a minimum night stay.

Missing Requirements:

Do not allow # of nights to be less than property nightly minimum.
Do not allow checkout date to be before checkin date.

So, if a visitor selects the checkin date of 12/01/2017, and the property has a minimum night stay of 3 nights, the visitor should not be allowed to select 12/02/2017, 12/03/2017. The next available night for them to checkout on should be 12/04/2017.

I'm not seeing that this is a simple option with this date picker. I do see that it has been added as a feature request by quite a few though. https://github.com/uxsolutions/bootstrap-datepicker/issues/970

I've built the start of what might be able to work by using the disabledDates and setDatesDisabled dates. Yet, I can't seem to figure out why these disabledDates are not working or firing when selecting a new start date. I think that I should be able to combine the newly set disabled dates with those already posted.

$(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']);]);

});

Is there another date picker that has this built in already? Or, is there a simple and clean way to add the missing requirements above to the bootstrap datepicker?

Simple JSFiddle

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

User User · Accepted Answer · 2017-10-18T04:35:46

Give this a try

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

Bootstrap Datepicker set Minimum Range

1 Answers