函数“beforeShowDay”和“onSelect”在遵循日期选择器小部件实现中实际做了什么

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

本文关键字：实现 什么 小部 日期 onSelect beforeShowDay 函数 选择器      更新时间：2023-09-26

我刚刚开始在一个网站上工作，一些开发人员以前在上面工作。他在其中一个网页中实现了日期选择器小部件。

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

我还浏览了日期选择器小部件的jQuery UI API文档，内容涉及"beforeShowDay"和"onSelect"函数，但在那里也找不到线索，因此寻求帮助使我以更简单和描述性的方式理解以下代码。

有人可以让我以简单明了的语言理解"在显示日之前"和"onSelect"函数在以下实现中的用法吗？

网页代码 ： 

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

beforeShowDay

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

首先，这是两个设计和实现得非常糟糕的功能。代码审查会话会拒绝它们。

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

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

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

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

相关文章：