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

Question

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

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

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

谁能用简单明了的语言让我理解函数'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>

Answer 1

演出日之前

调用的函数beforeShowDay用于在满足特定条件时向每个日期选择器单元格添加特定的 CSS 类。在您的情况下，此条件是“如果单元格的确切 date 等于先前在 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 日期选择器日期都不能满足 1969-12-31。您可以通过四种方法将此值更改为真实事件日期:

1. 通过执行 AJAX 调用动态设置它并分配 $.parseJSON(returnedJSON)至 myDates在 $(selector).datepicker(options) 之前函数被调用。
2. 通过在 data-anyname 中嵌入一个 JSON 字符串来动态设置它#datepicker 的属性本身使用任何服务器端脚本(<?php echo json_encode($eventDatesArray); ?> 如果是 PHP)，然后通过分配 $.parseJSON($(this).data('anyname')) 从该元素使用 JavaScript 读取它至 myDates在 $(selector).datepicker(options) 之前函数被调用。
3. 将其动态添加到您的 <script> 中如果 <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是突出显示事件日期单元格的类名。如果单元格的日期是事件日期之一，则该单元格将有一个名为 eventDateCls 的类并将突出显示。同样，更好的方法可能是仅使用 return [true, (myDates.indexOf(thisdate)<0) ? '' : 'eventDateCls',''];

选择

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