默认情况下，在bootstrap daterangepicker中选择“本月”范围 [英] Selecting 'This Month' range by default in bootstrap daterangepicker

问题描述

我正在使用Bootstrap Daterange Picker，它使用以下范围选项：

 范围：{
'今天'：[时刻（），时刻（）]，
'昨天'：[时刻（）。减去（1，'天'），时刻（）。减去（1，'天'）]，
'过去7天'：[时刻（）。减去（6，'天'），时刻（）]，
'过去30天'：[时刻（）。减去（29，'天' ），moment（）]，
'本月'：[moment（）。startOf（'month'），moment（）。endOf（'month'）]，
'上个月'：[ moment（）。减法（1，'月'）。startOf（'月'），时刻（）。减法（1，'月'）。endOf（'月'）] 
}，
  

但是当页面加载时，所选值为空。

我想在页面加载时选择本月范围，在bootstrap daterangepicker中。

Jsfiddle Url： https://jsfiddle.net/renishar/wnuy6ypc/

解决方案

设置startDate和endDate本月各自价值的选项。

在初始化你的datepicker以设置第一个值后再调用cb函数

<请参阅此处： https://jsfiddle.net/wnuy6ypc/6

  var dat_opt = {
 ...，
 startDate：moment（）。startOf（'month'），
 endDate：moment（）。endOf（'month'），
范围：{
 ... 
}，
} 
  

编辑：初始化后添加 jQuery（'。daterange'）。trigger（apply.daterangepicker）;

I'm using Bootstrap Daterange Picker, which uses the following range options :

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')]
      },

But when the page loads the selected value is empty.

I want to select the range 'This Month' by default when the page loads, in bootstrap daterangepicker.

Jsfiddle Url: https://jsfiddle.net/renishar/wnuy6ypc/

解决方案

Just set the startDate and endDate options to the respective value of This month.

Also call cb function after initialise your datepicker to set the first value

See here : https://jsfiddle.net/wnuy6ypc/6

var dat_opt = {
      ...,
      startDate: moment().startOf('month'),
      endDate: moment().endOf('month'),
      ranges: {
        ...
      },
}

EDIT : After initialisation add jQuery('.daterange').trigger("apply.daterangepicker");

这篇关于默认情况下，在bootstrap daterangepicker中选择“本月”范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！