BatchMode hack for bootstrap-daterangepicker

Have you ever thought of using a bootstrap jQuery plugin that does almost all of the functions you needed except one and the other jQuery plugins out there that supports the functionality that you’re currently needed doesn’t support the other functions or it’s just not easy to use.

I came across this problem recently with Date Range Picker Component for Bootstrap. It has all the functionalities my team needed except one (1). We needed a way to select the entire week but the plugin just doesn’t support it out of the box.

Below is the code we’re using to achieve the batch mode, selecting the entire week whenever a given date is being selected.

First we added a custom configuration/option to the date-range-picker called batchMode and we set it to week. We then hooked up to the apply.daterangepicker event and added the following code below:

function(ev, picker) {
  var weekLocale = picker.locale.firstDay ? 'isoweek' : 'week';

  if (configuration.batchMode == 'week') {
      picker.startDate = picker.startDate.startOf(weekLocale);

Please note: In order for this to work properly, the following configurations must be set:

singleDatePicker: true

And that the dateLimit must be set to false.

And that’s it. Whenever there’s a click event the entire week that the selected date is in will now be selected.