如何返回当天的预定义daterangepicker范围？

时间：2019-02-11 22:14:13

标签： javascript momentjs daterangepicker bootstrap-daterangepicker

我在daterangepicker实例（http://www.daterangepicker.com/）中有52个预定义的moment.js日期范围。在页面加载时，我希望根据当前日期将选择器设置为正确的范围。

例如，今天日期范围为第7周（2/11/2019-2/15/2019）。我希望在页面加载时选择该范围。

我已经阅读了daterangepicker文档，并且无法弄清楚如何访问isBetween() momentjs比较的范围。

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

1 个答案:

答案 0 :(得分：0)

如果要访问已初始化的daterangepicker的范围，则可以使用$("#reportrange").data('daterangepicker').ranges。

给出一个ranges对象（{'Week 1: [moment('01/01/2019', 'MM/DD/YYYY'), moment('01/04/2019', 'MM/DD/YYYY')], ... }'），您可以使用类似以下内容的方法：

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

以获取当前范围。如果今天不在任何范围内（例如，您的样本中的周末），则可能不会产生任何结果。

另一种方法是使用momentjs week()获取一年中的星期数，然后获取该范围的相应索引（如果该范围不代表一年中的所有星期，则此方法将失败）< / p> 

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>

相关问题
最新问题