获取jQueryUI的datepicker中范围之间的天数

Posted

技术标签:

【中文标题】获取jQueryUI的datepicker中范围之间的天数【英文标题】:Obtain the days between the range in the datepicker of jQueryUI 【发布时间】:2020-04-24 22:55:16 【问题描述】:

我正在使用jQuery UI 的date range picker,它运行良好。但现在我在想也许是有用的获取范围之间的天数列表。这可能吗?

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

很抱歉,我没有要显示的代码,因为我不知道我必须使用什么函数或方法,因为我的代码正在运行,但我只是认为也许有更好的选择。如果您认为这是本页的一个坏问题,请发表评论,我会立即将其删除。

【问题讨论】:

请做一些研究和谷歌搜索来解决这个问题 您是否检查过 moment.js 是否会提供解决方案? momentjs.com 还有这个***.com/a/37673619/3279876 @NEA,在 javascipt 中没有用于获取范围之间天数的特定函数,相反,您可以使用其他方法来解决此问题,例如创建一个数组并删除不在范围之间的日期,例如这个 这是一个很好的约会资源:github.com/you-dont-need/You-Dont-Need-Momentjs 【参考方案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">

【讨论】:

您好,非常感谢您的回答。我可以再问一个问题吗?是否可以将所有这些代码保存在外部 js 文件中并在需要时调用它?我正在尝试,但我不知道该怎么做。谢谢!!! @NEA 是的,这是可能的。

以上是关于获取jQueryUI的datepicker中范围之间的天数的主要内容,如果未能解决你的问题,请参考以下文章

日期选择器:jquery datepicker的使用

如何在 JQueryUI DatePicker 控件中显示“加载”文本 onChangeMonthYear?

jQueryUI DatePicker - 将点击事件添加到 minDate 和 maxDate 之外的日期

日期选择器:jquery datepicker的使用

Sonata Admin Bundle:DatePicker 范围

如何限制 Bootstrap Datepicker 中的可选日期范围?