Как вернуть предопределенный диапазон выбора даты, в который попадает текущий день? - PullRequest
0 голосов
/ 12 февраля 2019

У меня есть 52 предопределенных диапазона даты moment.js в экземпляре daterangepicker (http://www.daterangepicker.com/). При загрузке страницы, я бы хотел, чтобы выборщик был установлен в правильный диапазон на основе текущей даты.

Например, диапазон, в который попадает сегодняшняя дата, - это неделя 7 (2/11/2019 - 15/15/2019). Я хочу, чтобы этот диапазон был выбран при загрузке страницы.

IВы прочитали документы по поиску даты и не можете понять, как получить доступ к диапазонам для сравнения isBetween() момента.

//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 голосов
/ 12 февраля 2019

Если вы хотите получить доступ к диапазонам уже инициализированного 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]))

, чтобы получить текущий диапазон.Это может не дать никаких результатов, если сегодня не включен ни в какой диапазон (например, в выходные дни в вашей выборке).

Другой подход заключается в использовании моментов 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>
...