在daterangepicker中设置值

set value in daterangepicker

本文关键字:设置 daterangepicker      更新时间:2023-09-26

我正在使用以下日期范围选择器

但是,在我的主干模板中,我无法设置所选日期

日期范围选择器选项:

 $('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')]
  }
});

小部件指出,我们必须使用以下功能来实现它:

$('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('');
  });

如何在我的Backbone视图中写入这些内容?

最好的方法可能是在视图呈现后触发手动设置所选日期的代码。默认情况下,Backbone不会为您提供任何渲染后事件处理,但您可以自己编写。所以,首先应该呈现您的模板,当DOM更新时(所有控件都可用于$),运行设置inits/updates日期选择器的方法。

关于postRender机制的更多信息,您可以在本主题中找到:view.render()完成后的Backbone.js事件

希望它能帮助