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

Posted 2023-05-08

【中文标题】如何动态生成日期选择器引导日期禁用

【英文标题】：how to generate datepicker bootstrap datesDisabled dynamically

【发布时间】：2021-06-16 05:49:31

【问题描述】：

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

事实上，当我使用动态生成的 Array 时，Date Array 在我第二次从 datepicker 中选择日期时被传递给 beforeShowDay，而不是第一次传递给选择器， 但是当硬编码时，从第一次点击选择器时，数组就完美地传递给了beforShowDay。

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

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>

【参考方案1】：

ajax 和 datepicker init 异步运行，选择器在 ajax 完成之前初始化（这就是它第二次工作的原因），为了解决这个问题，您可以考虑使用 $.when (api.jquery.com/jquery.when)或者初始化 datepicker 然后当 ajax 返回响应时使用 datepicker 本身的方法（bootstrap-datepicker.readthedocs.io/.../methods...）希望这会有所帮助