Update the selected dates of date range picker for Twitter Bootstrap

Question

I'm using the date range picker for Twitter Bootstrap, by Dan Grossman .

When initialized, it's possible to set pre-defined values like startDate and endDate. Is it possible to update the values manually later on in a similar way?

What I want to do is to "load" the date range picker with filters I have saved, which includes a start and end date (not by defining pre-defined ranges). Just updating the field of the date range picker through jQuery won't update the actual selection of the calendar.

I guess I should do something like this when initializing the date range picker:

var reportrange = $('#reportrange').daterangepicker(),
DateRangePicker = reportrange.data('daterangepicker');

But then, how to use DateRangePicker to update the date range picker and calendar with new selected dates manually?

Answer 1

The latest version of this component provides methods for updating the start/end date:

$("#reportrange").data('daterangepicker').setStartDate(startDate);
$("#reportrange").data('daterangepicker').setEndDate(endDate);

You don't have to call the update methods yourself as these will handle all that.

Answer 2

I was on the right track. I could use DateRangePicker in the following way to update the dates:

DateRangePicker.startDate = moment(startDate.toJSON().slice(0, 10), DateRangePicker.format);
DateRangePicker.endDate = moment(endDate.toJSON().slice(0, 10), DateRangePicker.format);
DateRangePicker.updateView();
DateRangePicker.cb(DateRangePicker.startDate, DateRangePicker.endDate);
DateRangePicker.updateCalendars();

Answer 3

Thanks. Your piece of code help me to find a way to set a new date range dynamically in the page.

One thing though. It seems that your way would update all DateRangePickers in the page (assuming you have more than one).

Also, the DateRangePicker prototype object might no be accessible in your page ( if plugin placed in an external JS file ).

Here is a way to update only the one linked to your jQuery selector.

// Init DateRangePicker
$('#reportrange').daterangepicker({/* params */}),
...

// Update params dynamically after init.
// In this case, date format has been set to YYYY-MM-DD on init.
$("#reportrange").data().daterangepicker.startDate = moment( '2013-12-24', datepicker.data().daterangepicker.format );
$("#reportrange").data().daterangepicker.endDate = moment( '2013-12-25', datepicker.data().daterangepicker.format );
$("#reportrange").data().daterangepicker.updateCalendars();

Answer 4

additional information for Guillaume Lavoie's answer. This code worked for me:

orders = { order_sdate : "2015-01-01", order_edate : "2015-01-20" };

jQuery( "#order_date" ).val( order.order_sdate + " - " + order.order_edate );
jQuery( "#order_date" ).data('daterangepicker').startDate = moment( order.order_sdate, "YYYY-MM-DD" );
jQuery( "#order_date" ).data('daterangepicker').endDate = moment( order.order_edate, "YYYY-MM-DD" );
jQuery( "#order_date" ).data('daterangepicker').updateView();
jQuery( "#order_date" ).data('daterangepicker').updateCalendars();

Answer 5

This works for me :)

// Init DateRangePicker
$('#reportrange').daterangepicker({/* params */}),
...

// Update params dynamically after init.
// In this case, date format has been set to YYYY-MM-DD on init.
$("#reportrange").data().daterangepicker.startDate = moment( '2013-12-24', datepicker.data().daterangepicker.format );
$("#reportrange").data().daterangepicker.endDate = moment( '2013-12-25', datepicker.data().daterangepicker.format );
$("#reportrange").data().daterangepicker.updateCalendars();