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

【问题标题】：What do the functions 'beforeShowDay' and 'onSelect' actually do in following Datepicker widget implementation?'beforeShowDay' 和 'onSelect' 函数在以下 Datepicker 小部件实现中实际上做了什么？
【发布时间】：2016-01-28 13:52:50
【问题描述】：

我刚刚开始在某个网站上工作，一些开发人员以前在该网站上工作过。他在其中一个网页中实现了 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>

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>

【问题讨论】：

标签： javascript jquery jquery-ui datepicker jquery-widgets

【解决方案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。您可以通过四种方法将此值更改为真实事件日期：

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

第 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, '', ''];
}

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

onSelect

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

【讨论】：

【解决方案2】：

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

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

日期是否可选。
应用自定义 CSS 类。
附加自定义工具提示。

不幸的是，该实现仅将日期与包含旧日期的相同实体的静态数组进行比较，并有效地返回一个表明可以选择日期的值，并且没有使用特殊的 CSS 或工具提示。

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

【讨论】：