javascript - Selecting 'This Month' range by default in bootstrap daterangepicker - Stack Overflow

admin管理员组

文章数量:1315336

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: /

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/renishar/wnuy6ypc/

• javascript
• jquery
• twitter-bootstrap
• daterangepicker
• bootstrap-daterangepicker

Share Improve this question Follow asked Dec 6, 2016 at 10:34 ReNiSh ARReNiSh AR 2,85222 gold badges3333 silver badges4343 bronze badges 3

• 1 Set the startDate and endDate options to the respective value of This month. Call cb function after initialise your datepicker to set the first value => jsfiddle/wnuy6ypc/6 – Fefux Commented Dec 6, 2016 at 10:55
• wow, thank you, can u post it as answer. – ReNiSh AR Commented Dec 6, 2016 at 11:07
• also 1 need is there any way to call: 'apply.daterangepicker' event in startup – ReNiSh AR Commented Dec 6, 2016 at 11:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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/wnuy6ypc/6

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

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

本文标签： javascriptSelecting 39This Month39 range by default in bootstrap daterangepickerStack Overflow