javascript - 如何动态生成日期选择器引导日期禁用

问题描述

我正在尝试使用 ajax 调用动态生成禁用日期，并将结果传递给 bootstrap datepicker 的 datesDisabled 选项，或者将结果传递给 beforeShowDay 选项，但它不适用于动态创建的数组结果，但它有效适用于硬编码数组。

事实上，当我使用动态生成的 Array 时，Date Array 在我第二次从 datepicker 中选择日期时被传递给 beforeShowDay，并且它没有在第一次传递给选择器，
但是当硬编码时，数组完美传递从第一次单击选择器开始，在 ShowDay 之前。

动态创建的数组是日期数组：

2021-03-17,2021-03-18,2021-03-24,2021-04-06,2021-04-07,2021-04-13,2021-04-14

那么做错了什么？

<script type="text/javascript">
  $(document).ready(function () {
    function GetHolidayOrStopDay() {
      // alert("Get Holidays");
      var DateArray = new Array();
      $.ajax({
        type: "POST",
        url: "timeObjectWebService.asmx/GetHolidaysAndDisabledDays",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          var JsonObject = JSON.parse(data.d);

          $(JsonObject).each(function (index, da) {
            var testJsonDate = formatJsonDate(da.HolidayDate);
            var options = {
              year: "numeric",
              month: "numeric",
              day: "numeric",
            };
            var result = testJsonDate.toLocaleDateString("en", options);
            result = new Date(result);
            var DateResult = formatDate(result);
            //if (index < (JsonObject.length - 1)) {

            DateArray.push(DateResult);
            // }
            // else {
            //    DateArray += DateResult;
            //}
            console.log("rrr : " + DateResult);
          });
          //DateArray += ']';
          console.log("Date Array :" + DateArray);
          //console.log("1 : " + DateArray[1]);
        },
        error: function (err) {
          //alert("test err");
          console.log(err);
        },
      });
      //alert(DateArray);
      TestdisabledDays = DateArray;
      return DateArray;
    }

    function formatJsonDate(jsonDate) {
      var dat = new Date(parseInt(jsonDate.substr(6)));
      return dat;
    }

    var enableDays = ["2021-03-30"];
    var disabledDays = [
      "2021-03-23",
      "2021-03-22",
      "2021-03-30",
      "2021-03-29",
      "2021-03-28",
      "2021-04-01",
    ]; //for this hardcoded array everything works fine
    var TestdisabledDays = new Array();
    TestdisabledDays = GetHolidayOrStopDay();
    //GetHolidayOrStopDay();
    function formatDate(d) {
      var day = String(d.getDate());
      //add leading zero if day is is single digit

      if (day.length == 1) day = "0" + day;
      var month = String(d.getMonth() + 1);
      //add leading zero if month is is single digit
      if (month.length == 1) month = "0" + month;
      return d.getFullYear() + "-" + month + "-" + day;
    }

    $("#dtpicker").datepicker({
      format: "dd-mm-yyyy",
      autoclose: true,
      startDate: "0d",
      datesDisabled: [TestdisabledDays],

      beforeShowDay: function (date) {
        //alert("from picker");
        //for disable weekends :
        var dayNr = date.getDay();
        if (dayNr == 0 || dayNr == 6) {
          if (enableDays.indexOf(formatDate(date)) >= 0) {
            return true;
          }
          return false;
        }

        if (TestdisabledDays.indexOf(formatDate(date)) >= 0) {
          console.log("index of " + TestdisabledDays.indexOf(formatDate(date))); //disabledDays
          console.log("TestdisabledDays = " + TestdisabledDays); //disabledDays
          return false;
        }

        return true;
      },
    });
  });
</script>

标签： javascriptjquerytwitter-bootstrapdatepicker

javascript - 如何动态生成日期选择器引导日期禁用

问题描述

解决方案

推荐阅读