Is it possible to make dynamic range in angular daterangepicker?

Question

In usual case scenario:

vm.datePickerRangeOptions = {
  ranges: {
    'Today': [moment(), moment()]
  }
};

would be sufficient. This way I have defined range with todays start and end date. The problem occurs once the time passes: when page is not refreshed range 'Today' still points to day when page was rendered.

What I tried so far was adding some event handler:

vm.datePickerRangeOptions = {
  ranges: {
    'Today': [moment(), moment()]
  },
  eventHandlers: {
    'show.daterangepicker': a
  },
};

function a() {
   vm.datePickerRangeOptions.ranges = {
     'Today': [moment(), moment()]
  };
}

but once date picker was shown it was closed immediately.

Second approach was to set vm.dateRangePickerOptions as a function and set to option on input view. Js:

vm.dateRangePickerOptions = function() {
  return {
    ranges: {
      'Today': [moment(), moment()]
    }
  }
}

and template:

<input date-range-picker name="daterange" ng-model="vm.datePicker.date"
       options="vm.datePickerRangeOptions()">

In this case I receive an error from moment.js:

TypeError: can't convert undefined to object

score 0 · Accepted Answer · answered Nov 30 '17 at 18:28

Angular daterangepikcer is a wrapper for bootstrap daterangepicker and according to its creator it is not possible (issues: #1137, #1516).

To update date range values one can set them in some time interval. Eg:

function updateRanges() {
  vm.datePickerRangeOptions.ranges = {
    'Today': [moment(), moment()],
  }

  var now = moment();
  var startOfTomorrow = moment().add(1, 'day').startOf('day');
  $timeout(updateRanges, startOfTomorrow.diff(now));
}

Side note: if you want to update date ranges and you have set maxDate, don't forget to update it also in time interval.

Is it possible to make dynamic range in angular daterangepicker?

1 Answers1