Jquery 在datepicker asp.net webforms中从数据库加载日期

我试图用来自ajax调用的数据绑定jquery datepicker。 日期字符串即将出现，但当它变为beforeShowDay时，它没有显示任何内容

到目前为止，我的实施是：

<div id="date"></div>
<script>
    var selectedDates = new Array();
    $(function () {
       var userId = "<%= UserID %>";
       $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "/WebService1.asmx/JsonGetAllDatesOfWork",
          data: '{"userId":"' + userId + '"}',
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (data) {
            var availableDates = data.d;
            $.each(availableDates, function (i, item) {
            item = item.replace('{', '').replace('}', '');
            selectedDates.push(item);
            });
          },
            error: function (data) {
            alert('there is an error');
            }
           });
        });
       $('#date').datepicker({
             beforeShowDay: function (date) {
           dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
             if ($.inArray(dmy, selectedDates) != -1) {
               return [true, "", "Available"];
               } else {
                  return [false, "", "unAvailable"];
                 }
            },
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy',
            inline: true
         });

</script>

---

我认为问题在于，在您调用beforeShowDay之后，您调用ajax来获取数据。$ajax调用发生，在成功时，您在数组中设置了值，但同时服务器正在处理您的调用

$('#date').datepicker({

理想情况下，您需要在success方法中调用datePicker赋值。或者，您需要为$ajax调用设置async:false

备选案文1：

<div id="date"></div>
<script>
    var selectedDates = new Array();
    $(function () {
       var userId = "<%= UserID %>";
       $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "/WebService1.asmx/JsonGetAllDatesOfWork",
          data: '{"userId":"' + userId + '"}',
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (data) {
            var availableDates = data.d;
            $.each(availableDates, function (i, item) {
            item = item.replace('{', '').replace('}', '');
            selectedDates.push(item);
            });

            $('#date').datepicker({
                 beforeShowDay: function (date) {
               dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                 if ($.inArray(dmy, selectedDates) != -1) {
                   return [true, "", "Available"];
                   } else {
                      return [false, "", "unAvailable"];
                     }
                },
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy',
                inline: true
             });
          },
            error: function (data) {
            alert('there is an error');
            }
           });
        });


</script>

选项2不理想，因为应用程序将挂起，直到数据从服务器返回：

<div id="date"></div>
<script>
    var selectedDates = new Array();
    $(function () {
       var userId = "<%= UserID %>";
       $.ajax({
          type: "POST",
          async: false,
          contentType: "application/json; charset=utf-8",
          url: "/WebService1.asmx/JsonGetAllDatesOfWork",
          data: '{"userId":"' + userId + '"}',
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (data) {
            var availableDates = data.d;
            $.each(availableDates, function (i, item) {
            item = item.replace('{', '').replace('}', '');
            selectedDates.push(item);
            });
          },
            error: function (data) {
            alert('there is an error');
            }
           });
        });
       $('#date').datepicker({
             beforeShowDay: function (date) {
           dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
             if ($.inArray(dmy, selectedDates) != -1) {
               return [true, "", "Available"];
               } else {
                  return [false, "", "unAvailable"];
                 }
            },
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy',
            inline: true
         });

</script>

---

不，我发现这个问题真的很棘手，基本上datepicker是用[d-m-yy]的方式寻找格式，例如if 9-10-2014，返回的字符串包含日期格式[dd-mm-yy]。所以在日期室中没有09-10-2014，这就是为什么它没有映射日期选择器。我只需要提供像d-mm-yyy这样的日期格式，这很烦人。你肯定应该回答你自己的问题，因为我不得不认为其他人会有这个问题。

<div id="date"></div>
<script>
    var selectedDates = new Array();
    $(function () {
       var userId = "<%= UserID %>";
       $.ajax({
          type: "POST",
          async: false,
          contentType: "application/json; charset=utf-8",
          url: "/WebService1.asmx/JsonGetAllDatesOfWork",
          data: '{"userId":"' + userId + '"}',
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (data) {
            var availableDates = data.d;
            $.each(availableDates, function (i, item) {
            item = item.replace('{', '').replace('}', '');
            selectedDates.push(item);
            });
          },
            error: function (data) {
            alert('there is an error');
            }
           });
        });
       $('#date').datepicker({
             beforeShowDay: function (date) {
           dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
             if ($.inArray(dmy, selectedDates) != -1) {
               return [true, "", "Available"];
               } else {
                  return [false, "", "unAvailable"];
                 }
            },
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy',
            inline: true
         });

</script>