如何返回当前日期落在预先定义的daterangepicker范围是多少？

问题描述 投票：1回答：1

我有一个daterangepicker实例（http://www.daterangepicker.com/）52预先定义moment.js日期范围。在页面加载，我想为选择器设置为基于当前日期的正确范围。

例如，今天的日期在范围为第7周（2019年2月11日 - 2019年2月15日）。我想在页面加载时要选择的范围。

我读过的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>
javascript momentjs daterangepicker bootstrap-daterangepicker
1个回答
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()得到一年的周数，然后得到的范围内的相应指标（如果该范围并不代表今年众所周这种做法会失败）

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.