Bootstrap-datepicker: Date-range issue

[WitsDeveloper]

Expected behaviour

Let's say I have two fields named DateStart and DateEnd in an input group. I'm using the date-range method. I expect that once I pick the DateStart, the DateEnd calendar should have all other dates less than the date picked on DateStart disabled.

Actual behaviour

I'm still able to pick earlier dates on DateEnd even after picking a date on DateStart field.

Datepicker version used

ex. 1.6.1.

Example code

$('.datepicker-daterange input').each(function() {
$(this).datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
changeMonth: true,
changeYear: true
});
});

[gutierrezps]

After having this exact same issue, and not being clear on the docs, I figured it out on the sandbox.

To instantiate a date-range you call the $.datepicker() function on the input group, not on each date field.

<div class="input-daterange input-group" id="datepicker-range">
    <input type="text" class="input-sm form-control" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end" />
</div>

$('#datepicker-range').datepicker({
    // your config here
});

Devs, please add a note on the docs. In fact, it's quite confusing because they state:

Note that that input-daterange itself does not implement the datepicker methods. Methods should be directly called to the inputs. For example:

$('.input-daterange input').each(function() {
    $(this).datepicker('clearDates');
});

[erikwatson]

Thanks for this @gutierrezps, I was caught out by this for much longer than I should have been.
The docs have still not been updated.