set value in daterangepicker

Question

I am using the following daterangepicker

However in my Backbone template I am unable to set the selected date

Daterangepicker options:

 $('input[name="daterange"]').daterangepicker({
  autoUpdateInput: false,
  opens: "right",
  drops: "down",
  locale: {
    cancelLabel: 'Clear'
  },
  ranges: {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  }
});

The widget states that we have to use the below functions to achieve it:

$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

How do I write these in my Backbone view?

*"However in my Backbone template I am unable to set the selected date"* - That is very vague... How are you loading the template..? where are you initializing this plugin..? In a `Backbone.View`..? If so please share the code — T J, Nov 20 '15 at 10:38

score 0 · Answer 1 · edited May 23 '17 at 11:59

probably the best way is to trigger code that sets selected date manually after view is rendered. By default Backbone doesn't give you any postRender event handling, however you may write it by yourself. So - first you should render your template, and when DOM is updated (all controls available to $), run method which sets inits/updates datepickers.

More on postRender mechanism you may find in this topic: Backbone.js event after view.render() is finished

Hope it helps

set value in daterangepicker

1 Answers1