Получить дни между диапазонами в указателе даты jQueryUI - PullRequest
Новая
       157

Получить дни между диапазонами в указателе даты jQueryUI

0 голосов
/ 07 января 2020

Я использую Выбор диапазона дат из jQuery UI, и он работает отлично. Но теперь я думаю, может быть полезно получить список дней между диапазонами. Возможно ли это?

Я сделал это вручную, определив, какие месяцы имеют 30 и 31 день, февраль с 28 днями и сравнил год начального дня и конечного дня. Но я думаю, что должен быть более простой вариант.

Мне очень жаль, у меня нет кода для показа, потому что я не знаю, какую функцию или метод я должен использовать, потому что мой код работает, но Я просто думаю, что, может быть, есть лучший вариант. Если вы считаете, что это плохой вопрос для этой страницы, прокомментируйте его, и я немедленно удалю его.

1 Ответ

1 голос
/ 07 января 2020

Вы можете сделать это с помощью .setDate() для объекта Date.

Ожидаемые значения 1-31, но допускаются и другие значения:

  • 0 приведет к последнему дню предыдущего месяца
  • -1 приведет к дню перед последним днем ​​предыдущего месяца

Если в месяце 31 день:

  • 32 приведет к первому дню следующего месяца

Если в месяце 30 дней:

  • 32 во второй день следующего месяца

Используя разницу в количестве дней между двумя датами, вы можете выполнять итерацию и создавать новые объекты Date с заданным количеством дней. 

$(function() {
  var dateFormat = "mm/dd/yy";

  function getDate(element) {
    var date;
    try {
      date = $.datepicker.parseDate(dateFormat, element.value);
    } catch (error) {
      date = null;
    }

    return date;
  }

  function listDays(dta, dtb) {
    var result = [];
    if (dta == undefined || dtb == undefined) {
      console.log(dta, dtb);
      return [];
    }
    var dayDiff = (dtb - dta) / 86400000;
    var d = dta.getDate();
    var n = new Date(dta.setDate(d));
    for (var i = 0; i <= dayDiff; i++) {
      n = new Date(n.setDate(d));
      d++;
      if (d > 32) {
        d = 2;
      }
      result.push($.datepicker.formatDate(dateFormat, n));
    }
    return result;
  }

  var from = $("#from")
    .datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3
    })
    .on("change", function() {
      to.datepicker("option", "minDate", getDate(this));
    }),
    to = $("#to").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3
    })
    .on("change", function() {
      from.datepicker("option", "maxDate", getDate(this));
      console.log(listDays(getDate(from[0]), getDate(this)));
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
...