Javascript 功能是什么'；展会日前'；和'；onSelect'；在下面的Datepicker小部件实现中实际做了什么？

我刚刚开始在一个网站上工作，以前有一个开发者在这个网站上工作。他在其中一个网页中实现了Datepicker小部件

当我浏览这个实现的代码时，我不明白代码实际上做了什么？我搞不懂逻辑是怎么写的

我还查阅了Datepicker小部件的jQuery UI API文档，其中涉及函数“beforeShowDay”和“onSelect”，但在那里也找不到线索，因此请求帮助以更简单和描述性的方式理解以下代码

有人能让我了解一下在下面用简单明了的语言实现中“beforeShowDay”和“onSelect”函数的用法吗

HTML代码：

<div class="col-md-2 voffset2 rightpad">
  <div class="col-sm-3">
    <div id="datepicker"></div>
  </div>
</div>

    <script type="application/javascript">
    $(document).ready(function() {

      /******* Display Calender and events highlighted *******/

      /*Not understood what does below array variable has role to play */
      var myDates = $.parseJSON('["1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31"]');
      $( "#datepicker" ).datepicker({
        beforeShowDay: function(date) {
          var dateObj = new Date(date);
          var month = dateObj.getMonth() + 1;
          if(month < 10) {
            month = "0"+month;
          }

          var day = dateObj.getDate();          
          if(day < 10) {
            day = "0"+day;
          }

          var year = dateObj.getFullYear();

          thisdate = year + "-" + month + "-" + day;

          if($.inArray(thisdate, myDates) != -1) {
            return [true, 'eventDateCls', ''];
          } else {
            return [true, '', ''];
          }
        },
        onSelect: function(dateText, inst) {
          var dateAsString = dateText; 

          console.log(dateAsString);

          url = "http://localhost/CKWEB_28-12-2015/ajax_event.php";

          $.ajax({
            url: url,
            type: "POST",
            data:  {event_date:dateAsString},
            beforeSend: function() {
              $('#loader-icon').show();
            },
            complete: function() {
              $('#loader-icon').hide();
            },
            success: function(data) {
              $("#eventListing").html(data);

              $('#loader-icon').hide();
            },
            error: function(){}           
          });
        }
      });
        /******* Display Calender and events highlighted *******/
    });        
    </script>

Javascript代码：

<div class="col-md-2 voffset2 rightpad">
  <div class="col-sm-3">
    <div id="datepicker"></div>
  </div>
</div>

    <script type="application/javascript">
    $(document).ready(function() {

      /******* Display Calender and events highlighted *******/

      /*Not understood what does below array variable has role to play */
      var myDates = $.parseJSON('["1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31"]');
      $( "#datepicker" ).datepicker({
        beforeShowDay: function(date) {
          var dateObj = new Date(date);
          var month = dateObj.getMonth() + 1;
          if(month < 10) {
            month = "0"+month;
          }

          var day = dateObj.getDate();          
          if(day < 10) {
            day = "0"+day;
          }

          var year = dateObj.getFullYear();

          thisdate = year + "-" + month + "-" + day;

          if($.inArray(thisdate, myDates) != -1) {
            return [true, 'eventDateCls', ''];
          } else {
            return [true, '', ''];
          }
        },
        onSelect: function(dateText, inst) {
          var dateAsString = dateText; 

          console.log(dateAsString);

          url = "http://localhost/CKWEB_28-12-2015/ajax_event.php";

          $.ajax({
            url: url,
            type: "POST",
            data:  {event_date:dateAsString},
            beforeSend: function() {
              $('#loader-icon').show();
            },
            complete: function() {
              $('#loader-icon').hide();
            },
            success: function(data) {
              $("#eventListing").html(data);

              $('#loader-icon').hide();
            },
            error: function(){}           
          });
        }
      });
        /******* Display Calender and events highlighted *******/
    });        
    </script>

$（文档）.ready（函数（）{
/*******显示日历和突出显示的事件*******/
/*不明白下面的数组变量有什么作用*/
var myDates=$.parseJSON（“[“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”、“1969-12-31”））；
$（“#日期选择器”）。日期选择器({
beforeShowDay:功能（日期）{
var dateObj=新日期（日期）；
var month=dateObj.getMonth（）+1；
如果（月<10）{
月份=“0”+月份；
}
var day=dateObj.getDate（）；
如果（第10天）{
day=“0”+天；
}
var year=dateObj.getFullYear（）；
此日期=年+“-”+月+“-”+日；
if（$.inArray（thisdate，myDates）！=-1）{
返回[true，'eventDateCls'，''；
}否则{
返回[真]，''；
}
},
onSelect：函数（日期文本，inst）{
var dateAsString=dateText；
console.log（dateAsString）；
url=”http://localhost/CKWEB_28-12-2015/ajax_event.php";
$.ajax({
url:url，
类型：“POST”，
数据：{event_date:dateAsString}，
beforeSend:function（）{
$（“#加载程序图标”）.show（）；
},
完成：函数（）{
$（“#加载程序图标”）.hide（）；
},
成功：功能（数据）{
$（“#事件列表”）.html（数据）；
$（“#加载程序图标”）.hide（）；
},
错误：函数（）{}
});
}
});
/*******显示日历和突出显示的事件*******/
});        

首先，这是两个精心设计和实现的功能。代码审查会议可能会拒绝它们

可用于控制日历中一天的3个属性：

日期是否可选择

应用自定义CSS类

附加自定义工具提示

不幸的是，该实现只会将日期与包含旧日期相同实体的静态数组进行比较，实际上只返回一个值，该值指示可以选择日期，并且不使用特殊的CSS或工具提示

onSelect

通过向服务器发送ajax请求，对用户选择特定日期做出反应。它还控制一些“加载”UI元素，并最终使用请求的结果替换另一个元素的内容。

beforeShowDay 名为

beforeShowDay

的函数用于在满足特定条件时向每个日期选择器单元格添加特定的CSS类。在您的情况下，此条件是“如果单元格的确切日期等于先前在

myDates

中定义的事件日期之一”

让我为您解析代码：

第1部分

var myDates = $.parseJSON('["1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31"]');

这是定义

myDates

变量并为其赋值的部分。该值显然是一个实体模型值，因为从1970年1月1日开始的任何jQuery.ui datepicker日期都不能满足1969年12月31日的要求。可以通过四种方法将此值更改为实际事件日期：

通过执行AJAX调用动态设置它，并在调用

$（选择器）之前将
$.parseJSON（returnedJSON）
分配给
myDates
。datepicker（options）

函数

通过使用任何服务器端脚本（

如果是PHP），将JSON字符串嵌入到

#datepicker

本身的

data anyname

属性中，然后使用JavaScript从该元素读取它，方法是将

$.parseJSON（$（this）.data（'anyname'）

分配到

$（选择器）之前的
myDates
.datepicker（选项）

函数被调用

如果

具有内联代码而没有指向外部文件的链接，则使用服务器端脚本在

中动态添加它

替换现有脚本中的当前日期

第二部分

var dateObj = new Date(date);
var month = dateObj.getMonth() + 1;
if(month < 10) {
   month = "0"+month;
}

var day = dateObj.getDate();          
if(day < 10) {
   day = "0"+day;
}

var year = dateObj.getFullYear();

thisdate = year + "-" + month + "-" + day;

这是在先前定义的日期内搜索thisdate的部分。此处，

eventDateCls

是突出显示事件日期单元格的类名。如果单元格的日期是其中一个事件日期，则该单元格将有一个名为

eventDateCls

的类，并将高亮显示。同样，更好的方法可能是只使用

return[true，（myDates.indexOf（thisdate）