javascriptmomentjsdaterangepickerbootstrap-daterangepicker

How do I return the pre-defined daterangepicker range the current day falls in?

I have 52 pre-defined moment.js date ranges in a daterangepicker instance (http://www.daterangepicker.com/). On page load, I'd like for the picker to be set to the correct range based on the current date.

For example, the range today's date falls in is Week 7 (2/11/2019 - 2/15/2019). I want that range to be selected when the page loads.

I've read the daterangepicker docs and cannot figure out how to access the ranges for an isBetween() momentjs comparison.

//Daterange Picker Setup
var today = moment().format('MM/DD/YYYY');
var start = moment();
var end = moment();

function cb(start, end) {
  $("#reportrange span").html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

$("#reportrange").daterangepicker({
  startDate: start,
  endDate: end,
  ranges: {
    'Week 1': [moment('01/01/2019', 'MM/DD/YYYY'), moment('01/04/2019', 'MM/DD/YYYY')],
    'Week 2': [moment('01/07/2019', 'MM/DD/YYYY'), moment('01/11/2019', 'MM/DD/YYYY')],
    'Week 3': [moment('01/14/2019', 'MM/DD/YYYY'), moment('01/18/2019', 'MM/DD/YYYY')],
    'Week 4': [moment('01/21/2019', 'MM/DD/YYYY'), moment('01/25/2019', 'MM/DD/YYYY')],
    'Week 5': [moment('01/28/2019', 'MM/DD/YYYY'), moment('02/01/2019', 'MM/DD/YYYY')],
    'Week 6': [moment('02/04/2019', 'MM/DD/YYYY'), moment('02/08/2019', 'MM/DD/YYYY')],
    'Week 7': [moment('02/11/2019', 'MM/DD/YYYY'), moment('02/15/2019', 'MM/DD/YYYY')],
    'Week 8': [moment('02/19/2019', 'MM/DD/YYYY'), moment('02/22/2019', 'MM/DD/YYYY')],
    'Week 9': [moment('02/25/2019', 'MM/DD/YYYY'), moment('03/01/2019', 'MM/DD/YYYY')],
    'Week 10': [moment('03/04/2019', 'MM/DD/YYYY'), moment('03/08/2019', 'MM/DD/YYYY')],
    'Week 11': [moment('03/11/2019', 'MM/DD/YYYY'), moment('03/15/2019', 'MM/DD/YYYY')],
    'Week 12': [moment('03/18/2019', 'MM/DD/YYYY'), moment('03/22/2019', 'MM/DD/YYYY')],
    'Week 13': [moment('03/25/2019', 'MM/DD/YYYY'), moment('03/29/2019', 'MM/DD/YYYY')],
    'Week 14': [moment('04/01/2019', 'MM/DD/YYYY'), moment('04/05/2019', 'MM/DD/YYYY')],
    'Week 15': [moment('04/08/2019', 'MM/DD/YYYY'), moment('04/12/2019', 'MM/DD/YYYY')],
    'Week 16': [moment('04/15/2019', 'MM/DD/YYYY'), moment('04/19/2019', 'MM/DD/YYYY')],
    'Week 17': [moment('04/22/2019', 'MM/DD/YYYY'), moment('04/26/2019', 'MM/DD/YYYY')],
    'Week 18': [moment('04/29/2019', 'MM/DD/YYYY'), moment('05/03/2019', 'MM/DD/YYYY')],
    'Week 19': [moment('05/06/2019', 'MM/DD/YYYY'), moment('05/10/2019', 'MM/DD/YYYY')],
    'Week 20': [moment('05/13/2019', 'MM/DD/YYYY'), moment('05/17/2019', 'MM/DD/YYYY')],
    'Week 21': [moment('05/20/2019', 'MM/DD/YYYY'), moment('05/24/2019', 'MM/DD/YYYY')],
    'Week 22': [moment('05/28/2019', 'MM/DD/YYYY'), moment('05/31/2019', 'MM/DD/YYYY')],
    'Week 23': [moment('06/03/2019', 'MM/DD/YYYY'), moment('06/07/2019', 'MM/DD/YYYY')],
    'Week 24': [moment('06/10/2019', 'MM/DD/YYYY'), moment('06/14/2019', 'MM/DD/YYYY')],
    'Week 25': [moment('06/17/2019', 'MM/DD/YYYY'), moment('06/21/2019', 'MM/DD/YYYY')],
    'Week 26': [moment('06/24/2019', 'MM/DD/YYYY'), moment('06/28/2019', 'MM/DD/YYYY')],
    'Week 27': [moment('07/01/2019', 'MM/DD/YYYY'), moment('07/05/2019', 'MM/DD/YYYY')],
    'Week 28': [moment('07/08/2019', 'MM/DD/YYYY'), moment('07/12/2019', 'MM/DD/YYYY')],
    'Week 29': [moment('07/15/2019', 'MM/DD/YYYY'), moment('07/19/2019', 'MM/DD/YYYY')],
    'Week 30': [moment('07/22/2019', 'MM/DD/YYYY'), moment('07/26/2019', 'MM/DD/YYYY')],
    'Week 31': [moment('07/29/2019', 'MM/DD/YYYY'), moment('08/02/2019', 'MM/DD/YYYY')],
    'Week 32': [moment('08/05/2019', 'MM/DD/YYYY'), moment('08/09/2019', 'MM/DD/YYYY')],
    'Week 33': [moment('08/12/2019', 'MM/DD/YYYY'), moment('08/16/2019', 'MM/DD/YYYY')],
    'Week 34': [moment('08/19/2019', 'MM/DD/YYYY'), moment('08/23/2019', 'MM/DD/YYYY')],
    'Week 35': [moment('08/26/2019', 'MM/DD/YYYY'), moment('08/30/2019', 'MM/DD/YYYY')],
    'Week 36': [moment('09/03/2019', 'MM/DD/YYYY'), moment('09/06/2019', 'MM/DD/YYYY')],
    'Week 37': [moment('09/09/2019', 'MM/DD/YYYY'), moment('09/13/2019', 'MM/DD/YYYY')],
    'Week 38': [moment('09/16/2019', 'MM/DD/YYYY'), moment('09/20/2019', 'MM/DD/YYYY')],
    'Week 39': [moment('09/23/2019', 'MM/DD/YYYY'), moment('09/27/2019', 'MM/DD/YYYY')],
    'Week 40': [moment('09/30/2019', 'MM/DD/YYYY'), moment('10/04/2019', 'MM/DD/YYYY')],
    'Week 41': [moment('10/07/2019', 'MM/DD/YYYY'), moment('10/11/2019', 'MM/DD/YYYY')],
    'Week 42': [moment('10/14/2019', 'MM/DD/YYYY'), moment('10/18/2019', 'MM/DD/YYYY')],
    'Week 43': [moment('10/21/2019', 'MM/DD/YYYY'), moment('10/25/2019', 'MM/DD/YYYY')],
    'Week 44': [moment('10/28/2019', 'MM/DD/YYYY'), moment('11/01/2019', 'MM/DD/YYYY')],
    'Week 45': [moment('11/04/2019', 'MM/DD/YYYY'), moment('11/08/2019', 'MM/DD/YYYY')],
    'Week 46': [moment('11/12/2019', 'MM/DD/YYYY'), moment('11/15/2019', 'MM/DD/YYYY')],
    'Week 47': [moment('11/18/2019', 'MM/DD/YYYY'), moment('11/22/2019', 'MM/DD/YYYY')],
    'Week 48': [moment('11/25/2019', 'MM/DD/YYYY'), moment('11/29/2019', 'MM/DD/YYYY')],
    'Week 49': [moment('12/02/2019', 'MM/DD/YYYY'), moment('12/06/2019', 'MM/DD/YYYY')],
    'Week 50': [moment('12/09/2019', 'MM/DD/YYYY'), moment('12/13/2019', 'MM/DD/YYYY')],
    'Week 51': [moment('12/16/2019', 'MM/DD/YYYY'), moment('12/20/2019', 'MM/DD/YYYY')],
    'Week 52': [moment('12/23/2019', 'MM/DD/YYYY'), moment('12/30/2019', 'MM/DD/YYYY')]
  }
}, cb);

cb(start, end);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <form action="" method="GET" id="test-form">
          <div class="well">
            <div class="row">
              <div class="col-sm-4 col-sm-offset-4 text-center">
                <div class="form-group">
                  <label class="control-label">Choose a Date Range</label>
                  <div class="text-center" id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <b class="caret"></b>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
</body>

</html>

Solution

  • If you want to access the ranges of an already initialized daterangepicker you can use $("#reportrange").data('daterangepicker').ranges.

    Given a ranges object ({'Week 1: [moment('01/01/2019', 'MM/DD/YYYY'), moment('01/04/2019', 'MM/DD/YYYY')], ... }') you can use something like:

    Object.values(ranges).filter((item) => moment().isBetween(item[0], item[1]))

    to get the current range. This could give no results if today is not included in any range (e.g. during weekends in your sample).

    Another approach is to use momentjs week() to get the week number of the year and then get the corresponding index of the range (this approach will fail if the ranges does not represent all the weeks of the year)

    var ranges = {
    'Week 1': [moment('01/01/2019', 'MM/DD/YYYY'), moment('01/04/2019', 'MM/DD/YYYY')],
    'Week 2': [moment('01/07/2019', 'MM/DD/YYYY'), moment('01/11/2019', 'MM/DD/YYYY')],
    'Week 3': [moment('01/14/2019', 'MM/DD/YYYY'), moment('01/18/2019', 'MM/DD/YYYY')],
    'Week 4': [moment('01/21/2019', 'MM/DD/YYYY'), moment('01/25/2019', 'MM/DD/YYYY')],
    'Week 5': [moment('01/28/2019', 'MM/DD/YYYY'), moment('02/01/2019', 'MM/DD/YYYY')],
    'Week 6': [moment('02/04/2019', 'MM/DD/YYYY'), moment('02/08/2019', 'MM/DD/YYYY')],
    'Week 7': [moment('02/11/2019', 'MM/DD/YYYY'), moment('02/15/2019', 'MM/DD/YYYY')],
    'Week 8': [moment('02/19/2019', 'MM/DD/YYYY'), moment('02/22/2019', 'MM/DD/YYYY')],
    'Week 9': [moment('02/25/2019', 'MM/DD/YYYY'), moment('03/01/2019', 'MM/DD/YYYY')],
    'Week 10': [moment('03/04/2019', 'MM/DD/YYYY'), moment('03/08/2019', 'MM/DD/YYYY')],
    'Week 11': [moment('03/11/2019', 'MM/DD/YYYY'), moment('03/15/2019', 'MM/DD/YYYY')],
    'Week 12': [moment('03/18/2019', 'MM/DD/YYYY'), moment('03/22/2019', 'MM/DD/YYYY')],
    'Week 13': [moment('03/25/2019', 'MM/DD/YYYY'), moment('03/29/2019', 'MM/DD/YYYY')],
    'Week 14': [moment('04/01/2019', 'MM/DD/YYYY'), moment('04/05/2019', 'MM/DD/YYYY')],
    'Week 15': [moment('04/08/2019', 'MM/DD/YYYY'), moment('04/12/2019', 'MM/DD/YYYY')],
    'Week 16': [moment('04/15/2019', 'MM/DD/YYYY'), moment('04/19/2019', 'MM/DD/YYYY')],
    'Week 17': [moment('04/22/2019', 'MM/DD/YYYY'), moment('04/26/2019', 'MM/DD/YYYY')],
    'Week 18': [moment('04/29/2019', 'MM/DD/YYYY'), moment('05/03/2019', 'MM/DD/YYYY')],
    'Week 19': [moment('05/06/2019', 'MM/DD/YYYY'), moment('05/10/2019', 'MM/DD/YYYY')],
    'Week 20': [moment('05/13/2019', 'MM/DD/YYYY'), moment('05/17/2019', 'MM/DD/YYYY')],
    'Week 21': [moment('05/20/2019', 'MM/DD/YYYY'), moment('05/24/2019', 'MM/DD/YYYY')],
    'Week 22': [moment('05/28/2019', 'MM/DD/YYYY'), moment('05/31/2019', 'MM/DD/YYYY')],
    'Week 23': [moment('06/03/2019', 'MM/DD/YYYY'), moment('06/07/2019', 'MM/DD/YYYY')],
    'Week 24': [moment('06/10/2019', 'MM/DD/YYYY'), moment('06/14/2019', 'MM/DD/YYYY')],
    'Week 25': [moment('06/17/2019', 'MM/DD/YYYY'), moment('06/21/2019', 'MM/DD/YYYY')],
    'Week 26': [moment('06/24/2019', 'MM/DD/YYYY'), moment('06/28/2019', 'MM/DD/YYYY')],
    'Week 27': [moment('07/01/2019', 'MM/DD/YYYY'), moment('07/05/2019', 'MM/DD/YYYY')],
    'Week 28': [moment('07/08/2019', 'MM/DD/YYYY'), moment('07/12/2019', 'MM/DD/YYYY')],
    'Week 29': [moment('07/15/2019', 'MM/DD/YYYY'), moment('07/19/2019', 'MM/DD/YYYY')],
    'Week 30': [moment('07/22/2019', 'MM/DD/YYYY'), moment('07/26/2019', 'MM/DD/YYYY')],
    'Week 31': [moment('07/29/2019', 'MM/DD/YYYY'), moment('08/02/2019', 'MM/DD/YYYY')],
    'Week 32': [moment('08/05/2019', 'MM/DD/YYYY'), moment('08/09/2019', 'MM/DD/YYYY')],
    'Week 33': [moment('08/12/2019', 'MM/DD/YYYY'), moment('08/16/2019', 'MM/DD/YYYY')],
    'Week 34': [moment('08/19/2019', 'MM/DD/YYYY'), moment('08/23/2019', 'MM/DD/YYYY')],
    'Week 35': [moment('08/26/2019', 'MM/DD/YYYY'), moment('08/30/2019', 'MM/DD/YYYY')],
    'Week 36': [moment('09/03/2019', 'MM/DD/YYYY'), moment('09/06/2019', 'MM/DD/YYYY')],
    'Week 37': [moment('09/09/2019', 'MM/DD/YYYY'), moment('09/13/2019', 'MM/DD/YYYY')],
    'Week 38': [moment('09/16/2019', 'MM/DD/YYYY'), moment('09/20/2019', 'MM/DD/YYYY')],
    'Week 39': [moment('09/23/2019', 'MM/DD/YYYY'), moment('09/27/2019', 'MM/DD/YYYY')],
    'Week 40': [moment('09/30/2019', 'MM/DD/YYYY'), moment('10/04/2019', 'MM/DD/YYYY')],
    'Week 41': [moment('10/07/2019', 'MM/DD/YYYY'), moment('10/11/2019', 'MM/DD/YYYY')],
    'Week 42': [moment('10/14/2019', 'MM/DD/YYYY'), moment('10/18/2019', 'MM/DD/YYYY')],
    'Week 43': [moment('10/21/2019', 'MM/DD/YYYY'), moment('10/25/2019', 'MM/DD/YYYY')],
    'Week 44': [moment('10/28/2019', 'MM/DD/YYYY'), moment('11/01/2019', 'MM/DD/YYYY')],
    'Week 45': [moment('11/04/2019', 'MM/DD/YYYY'), moment('11/08/2019', 'MM/DD/YYYY')],
    'Week 46': [moment('11/12/2019', 'MM/DD/YYYY'), moment('11/15/2019', 'MM/DD/YYYY')],
    'Week 47': [moment('11/18/2019', 'MM/DD/YYYY'), moment('11/22/2019', 'MM/DD/YYYY')],
    'Week 48': [moment('11/25/2019', 'MM/DD/YYYY'), moment('11/29/2019', 'MM/DD/YYYY')],
    'Week 49': [moment('12/02/2019', 'MM/DD/YYYY'), moment('12/06/2019', 'MM/DD/YYYY')],
    'Week 50': [moment('12/09/2019', 'MM/DD/YYYY'), moment('12/13/2019', 'MM/DD/YYYY')],
    'Week 51': [moment('12/16/2019', 'MM/DD/YYYY'), moment('12/20/2019', 'MM/DD/YYYY')],
    'Week 52': [moment('12/23/2019', 'MM/DD/YYYY'), moment('12/30/2019', 'MM/DD/YYYY')]
};

//Daterange Picker Setup
var today = moment().format('MM/DD/YYYY');
var start = moment();
var end = moment();

const currRangeElems = Object.values(ranges).filter((item) => moment().isBetween(item[0], item[1]));
if( currRangeElems ){
  start = currRangeElems[0][0];
  end = currRangeElems[0][1];
}

// Alternative solution
// currentRange = Object.values(ranges)[moment().week()];
// start = currentRange[0];
// end = currentRange[1];

function cb(start, end) {
  $("#reportrange span").html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

$("#reportrange").daterangepicker({
  startDate: start,
  endDate: end,
  ranges: ranges
}, cb);

cb(start, end);
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <form action="" method="GET" id="test-form">
          <div class="well">
            <div class="row">
              <div class="col-sm-4 col-sm-offset-4 text-center">
                <div class="form-group">
                  <label class="control-label">Choose a Date Range</label>
                  <div class="text-center" id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <b class="caret"></b>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
</body>

</html>