如何设置 maxDate 是当年 12 月的最后一天？答案

【问题标题】：How to set maxDate is last day of december on current year?如何设置 maxDate 是当年 12 月的最后一天？
【发布时间】：2019-01-02 01:28:31
【问题描述】：

我有这个日期范围的日期选择器：

$(function () {
  //date picker range 
  $(function () {         
    var dateFormat = "mm/dd/yy",
      from = $("#<%= TextBox1.ClientID %>").datepicker({
        //defaultDate: "+1w",
        changeMonth: true,
        minDate: MinDateManipulation(),
        beforeShowDay: DisableMonday,
        maxDate: '+2M',
        numberOfMonths:1
      })
      .on("change", function () {
        to.datepicker("option", "minDate", getDate(this));
      }),
      to = $("#<%= TextBox2.ClientID %>").datepicker({
        //defaultDate: "+1w",
        changeMonth: true,
        beforeShowDay: DisableMonday,
        maxDate: '+2M',
        numberOfMonths:1
      })
      .on("change", function () {
        from.datepicker("option", "maxDate", getDate(this));
      });
    function getDate(element) {
      var date;
      try {
        date = $.datepicker.parseDate(dateFormat, element.value);
      } catch (error) {
        date = null;
      }
      return date;
    }
  });

当我尝试从当前日期后 2 个月禁用日期时，它可以工作，但目的是在当年之后的每年 1 月 1 日禁用日期。

例如：当前日期 [11/3/2018]

我想禁用在当年每年 12 月的最后一天之后选择的日期，maxDate [31/12/2018]。

但是我们如何动态设置 maxDate 的值呢？不用我的日期范围条件脚本手动更新年份的值？

【问题讨论】：

我认为这是 jQuery UI DatePicker？如果是这样，请查看api.jqueryui.com/datepicker/#option-maxDate 它接受的天数。如果您知道今天和您想要的最大日期，您可以动态计算天数。或者使用返回日期、数字或字符串的函数。
是的，它的 Jquery UI DatePicker。我已经尝试过一些类似 maxDate: new Date(someVariabel, 1,1) 但它仍然无法正常工作

标签： javascript jquery

【解决方案1】：

目前尚不清楚您要捕获的范围，但您可以利用已有的范围做很多事情。

一种方法是将其设置为字符串格式：

var yr = $.datepicker.formatDate("yy", new Date());
var dec31 = "12/31/" + yr;
....({
  maxDate: dec31,
})

这将获取当前年份 (2018) 并创建一个可用作最大日期的字符串：12/31/2018。这将保持动态并每年更新。

您还可以将一年中的天数定义为假期。你可以做很多事情。

也许这个例子有助于澄清一些事情。

$(function() {
  var holidays = {
    2018: {
      11: {
        12: [
          false,
          "holiday",
          "Veterans Day Observed"
        ],
        22: [
          false,
          "holiday",
          "Thanksgiving Day"
        ]
      },
      12: {
        25: [
          false,
          "holiday",
          "Christmas Day"
        ],
        31: [
          false,
          "holiday",
          "New Year's Eve"
        ]
      }
    },
    2019: {
      1: {
        1: [
          false,
          "holiday",
          "New Year's Day"
        ],
        21: [
          false,
          "holiday",
          "Martin Luther King Jr. Day"
        ]
      },
      2: {
        18: [
          false,
          "holiday",
          "Presidents' Day"
        ]
      },
      5: {
        27: [
          false,
          "holiday",
          "Memorial Day"
        ]
      },
      7: {
        4: [
          false,
          "holiday",
          "Independence Day"
        ]
      },
      9: {
        2: [
          false,
          "holiday",
          "Labor Day"
        ]
      },
      10: {
        14: [
          false,
          "holiday",
          "Columbus Day"
        ]
      },
      11: {
        11: [
          false,
          "holiday",
          "Veterans Day"
        ],
        28: [
          false,
          "holiday",
          "Thanksgiving Day"
        ]
      },
      12: {
        25: [
          false,
          "holiday",
          "Christmas Day"
        ],
        31: [
          false,
          "holiday",
          "New Year's Eve"
        ]
      }
    }
  };

  function disableDays(d) {
    var result = [true, ""];
    var yr = $.datepicker.formatDate("yy", d),
      mo = $.datepicker.formatDate("m", d),
      dy = $.datepicker.formatDate("d", d);
    if ($.datepicker.formatDate("D", d) == "Mon") {
      result[0] = false;
    }
    if (holidays[yr] !== undefined) {
      if (holidays[yr][mo] !== undefined) {
        if (holidays[yr][mo][dy] !== undefined) {
          console.log("Holiday:", yr, mo, dy);
          result = holidays[yr][mo][dy];
        }
      }
    }
    return result;
  }

  var dateFormat = "mm/dd/yy",
    from = $("#client-id-1").datepicker({
      //defaultDate: "+1w",
      changeMonth: true,
      minDate: 0,
      beforeShowDay: disableDays,
      maxDate: '+1y',
      numberOfMonths: 1
    })
    .on("change", function() {
      to.datepicker("option", "minDate", getDate(this));
    }),
    to = $("#client-id-2").datepicker({
      //defaultDate: "+1w",
      changeMonth: true,
      beforeShowDay: disableDays,
      maxDate: '+2m',
      numberOfMonths: 1
    })
    .on("change", function() {
      from.datepicker("option", "maxDate", getDate(this));
    });

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

<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>

<p>Client 1: <input type="text" id="client-id-1"></p>
<p>Client 2: <input type="text" id="client-id-2"></p>

【讨论】：

【解决方案2】：

您可以使用moment.js 并使用我的代码获取最大日期：

function _getMaxDate() {
    const today = moment().startOf('day')
    const lastDayOfYear = moment().endOf('year').startOf('day')

    return lastDayOfYear.diff(today, 'days')
}

【讨论】：