'beforeShowDay' 和 'onSelect' 函数在以下 Datepicker 小部件实现中实际做了什么？

What do the functions 'beforeShowDay' and 'onSelect' actually do in following Datepicker widget implementation?

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

当我浏览这个实现的代码时，我不明白代码实际上做了什么？我无法弄清楚逻辑的编写方式。

我还浏览了 jQuery UI API 日期选择器小部件关于函数 'beforeShowDay' 和 'onSelect'[=30] 的文档=] 但在那里也找不到线索，所以寻求帮助让我以更简单和描述性的方式理解以下代码。

有人可以用简单明了的语言让我理解函数 'beforeShowDay' 和 'onSelect' 在以下实现中的用法吗？

HTML代码：

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

Javascript代码：

    <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>

首先，这是两个设计和实现都非常棒的功能。代码审查 session 会拒绝他们。

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

  1. 日期是否可选
  2. 应用自定义 CSS class.
  3. 附加自定义工具提示。

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

onSelect 通过向服务器发送 ajax 请求来响应用户选择特定日期。它还控制了一些 "loading" UI 元素，并最终使用请求的结果替换另一个元素的内容。

演出日之前

名为beforeShowDay的函数用于在满足特定条件时向每个日期选择器单元格添加特定的CSS class。在你的例子中，这个条件是 "if the exact date of the cell is equal to one of the event dates previously defined in 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 变量并为其赋值的部分。该值显然是一个模型值，因为从 01/01/1970 开始的任何 jQuery.ui 日期选择器日期都不能满足 1969-12-31。您可以通过四种方法将此值更改为真实事件日期：

  1. 通过执行 AJAX 调用动态设置它，并在调用 $(selector).datepicker(options) 函数之前将 $.parseJSON(returnedJSON) 分配给 myDates。
  2. 通过使用任何服务器端脚本将 JSON 字符串嵌入 #datepicker 本身的 data-anyname 属性来动态设置它（<?php echo json_encode($eventDatesArray); ?> if PHP )，然后在调用 $(selector).datepicker(options) 函数之前，通过将 $.parseJSON($(this).data('anyname')) 分配给 myDates，使用该元素的 JavaScript 读取它。
  3. 如果 <script> 具有内联代码而不是 link 到外部文件，则使用服务器端脚本将其动态添加到您的 <script> 中。
  4. 替换现有脚本中的当前日期。

第 2 部分

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 的部分。不过，仅使用 thisdate = $.datepicker.formatDate("yy-mm-dd", new Date(date)); 会更简单。

第 3 部分

if($.inArray(thisdate, myDates) != -1) {
   return [true, 'eventDateCls', ''];
} else {
   return [true, '', ''];
}

这是在先前定义的日期内搜索此日期的部分。此处，eventDateCls 是 class 名称，用于突出显示事件日期单元格。如果单元格的日期是事件日期之一，则该单元格将有一个名为 eventDateCls 的 class 并将突出显示。同样，更好的方法可能是仅使用 return [true, (myDates.indexOf(thisdate)<0) ? '' : 'eventDateCls',''];

onSelect

至于 onSelect，它只是一个事件触发的回调函数，它接收选定日期作为文本并将其发布到某个 http://localhost/CKWEB_28-12-2015/ajax_event.php，无论它是什么。我们无法确定它到底做了什么，但这是一个 PHP 文件，可能用于验证和保存（插入数据库）选定的日期信息。我们唯一知道的是，它应该 return （回显）一些可以通过 $("#eventListing").html(data) 调用直接插入 DOM 的字符串。