CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdaterangepicker
Gustav
Gustav

Reputation: 347

Update the selected dates of date range picker for Twitter Bootstrap

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?

Upvotes: 12

Views: 57001

Answers (5)

Atul Kumar Shukla
Atul Kumar Shukla

Reputation: 1

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

Upvotes: -1

user1173426
user1173426

Reputation:

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

Upvotes: 4

Dan Grossman
Dan Grossman

Reputation: 52372

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.

Upvotes: 28

Guillaume Lavoie
Guillaume Lavoie

Reputation: 567

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

Upvotes: 3

Gustav
Gustav

Reputation: 347

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

Upvotes: 5

Related Questions