Как установить maxDate в последний день декабря текущего года?

Question

У меня есть этот диапазон дат:

$(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 января каждого следующего года после текущего года.

например: текущая дата [03.11.2008]

Я хочу отключить дату для выбора после последнего дня декабря каждого текущего года с maxDate [31/12/2018].

Но как установить динамически значение maxDate? без обновления значения года вручную с помощью моего скрипта условия daterange?

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

Answer 2

Вы можете использовать moment.js и использовать мой код для получения максимальной даты:

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

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