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

Question

我刚开始在一个开发人员以前工作的网站上工作.他在其中一个网页中实现了Datepicker小部件.

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

我还浏览了关于函数'beforeShowDay'和'onSelect'的Datepicker小部件的jQuery UI API文档,但是也找不到线索,所以请求帮助让我以更简单和描述的方式理解下面的代码.

有人可以用简单明了的语言让我理解"afterShowDay"和"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这是定义变量并为其赋值的部分。该值显然是一个模型值，因为任何从 01/01/1970 开始的 jQuery.ui 日期选择器日期都无法满足 1969-12-31 的要求。您可以通过四种方法将此值更改为实际事件日期：

1. 通过执行 AJAX 调用动态设置它并在调用函数之前$.parseJSON(returnedJSON)分配。myDates$(selector).datepicker(options)
2. 通过使用任何服务器端脚本（如果是 PHP）将 JSON 字符串嵌入到其自身data-anyname的属性中来动态设置它，然后通过在调用函数之前分配to来使用 JavaScript 从该元素读取它。#datepicker<?php echo json_encode($eventDatesArray); ?>$.parseJSON($(this).data('anyname'))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));会是一种更简单的方法。

第三部分

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

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

选择时

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