获得jQueryUI的日期选择器范围之间的日期

问题描述 投票:0回答:1

我正在使用date range pickerjQuery UI,并且运行正常。但是现在我想获得一个范围之间的天数列表也许有用。这可能吗?

我手动定义了哪些月份分别为30天和31天,2月为28天,并比较开始日期和结束日期的年份。但我认为必须有一个更简单的选择。

[很抱歉,我没有代码要显示,因为我不知道要使用什么函数或方法,因为我的代码可以正常工作,但是我认为也许有更好的选择。如果您认为此页是一个不好的问题,请对其进行评论,然后我将其立即删除。

jquery jquery-ui jquery-ui-datepicker
1个回答
1
投票

您可以使用.setDate()作为日期对象来执行此操作。

预期值为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">
© www.soinside.com 2019 - 2024. All rights reserved.