Not all methods are available when it's daterange control

[AndrewEastwood]

I've tried $('#datepicker').datepicker('show'); with the range control and I've got jquery element only. html is

<div class="qb-datetime-picker form-group">
    <div class="input-daterange input-group" id="datepicker">
        <input type="text" class="input-sm form-control"/>
        <span class="input-group-addon">to</span>
        <input type="text" class="input-sm form-control" />
    </div>
</div>

and init script$('#datepicker').datepicker();

[falquaddoomi]

This hung me up as well. The methods are available on the internal input elements, not on the div that contains them both, unfortunately. If you, say, wanted to set the dates of both controls, you'd have to do something like the following (where start_date and end_date are set, of course):

  $(".input-daterange .input-sm").each(function(idx) {
    $(this).datepicker('update', (idx == 0)?start_date:end_date);
  });

It might be nice in the future to have separate methods for the range version of the datepicker that'd allow you to "broadcast" updates or other method calls down into multiple linked controls.

[AndrewEastwood]

I used temporary solution and just used direct access to each picker. You need just use element's data and then datepicker key to get component instance. And there are all props and you can also have access to picker[0] or picker[1] and theirs methods getDate or setDate, whatever

[falquaddoomi]

Ah, that works, too. Still, it'd be nice to access those functions through the official API.

[yantakus]

Thank you for the solutions, guys. I vote for the official API methods for date-range too.