Question

我正在尝试将jquery datepicker与来自ajax调用的数据绑定。日期字符串即将到来，但当它出现在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>

值对于selectedDate的格式为

["20-08-2014", "21-08-2014", "22-08-2014", "27-08-2014", "28-08-2014", "29-08-2014", "09-09-2014", "18-09-2014", "19-09-2014", "21-09-2014", "23-09-2014", "25-09-2014", "13-10-2014", "14-10-2014"]

Answer 1

我认为问题在于，在调用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 asp.net webforms中从DataBase加载日期

1 个答案: