Question

我有这个日期范围datepicker：

$(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日禁用日期。

例如：当前日期[2018年1月1日]

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

但是我们如何动态设置maxDate的值？不使用我的daterange条件脚本手动更新年份的值？

Answer 1

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

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

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

这将获得当前的Year（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>

Answer 2

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

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

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

如何将maxDate设置为当年12月的最后一天？

2 个答案: