Что на самом деле делают функции beforeShowDay и onSelect в следующей реализации виджета Datepicker?

Я только начал работать над сайтом, на котором ранее работал какой-то разработчик. Он внедрил виджет Datepicker на одной из веб-страниц.

Когда я прохожу код этой реализации, я не понимаю, что на самом деле делает код? Я не могу понять, как была написана логика.

Я также просмотрел документацию по API jQuery UI для виджета Datepicker, касающуюся функций 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>
Источник

2 ответа

Решение

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 переменная определена и ей присвоено значение. Это значение, очевидно, является значением макета, поскольку 1969-12-31 не может быть встречено ни одной датой выбора даты jQuery.ui, которая начинается с 01.01.1970. Вы можете изменить это значение на даты реального события четырьмя способами:

  1. Установите его динамически с помощью вызова AJAX и назначьте $.parseJSON(returnedJSON) в myDates перед $(selector).datepicker(options) функция называется.
  2. Установите его динамически, вставив строку JSON в data-anyname атрибут #datepicker сам с помощью любого серверного скрипта (<?php echo json_encode($eventDatesArray); ?> если PHP), а затем читать его с помощью JavaScript из этого элемента, назначив $.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;

Это та часть, где разработчик получает полную дату ячейки datepicker и назначает ее 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

Что касается onSelect, это просто функция обратного вызова, инициируемая событием, которая получает выбранную дату в виде текста и отправляет ее некоторым http://localhost/CKWEB_28-12-2015/ajax_event.php, что бы это ни было. Мы не можем точно знать, что именно он делает, но это файл PHP, вероятно, используемый для проверки и сохранения (вставки в БД) выбранной информации о дате. Единственное, что мы знаем, это то, что он должен возвращать (эхо) некоторую строку, которая может быть непосредственно вставлена ​​в DOM $("#eventListing").html(data) вызов.

Источник

Для начала, это две ужасно разработанные и реализованные функции. Сеанс проверки кода отклонил бы их.

beforeShowDay может использоваться для управления 3 свойствами дня в календаре:

  1. Выбирается ли дата или нет.
  2. Примените пользовательский класс CSS.
  3. Прикрепите пользовательскую подсказку.

К сожалению, реализация не делает ничего, кроме как сравнивает даты со статическим массивом, содержащим ту же сущность старой даты, и фактически просто возвращает значение, которое указывает, что даты могут быть выбраны, и никакой специальный CSS или подсказка не используются.

onSelect реагирует на пользователя, выбирающего конкретную дату, отправляя запрос ajax на сервер. Он также контролирует некоторый "загружающий" элемент пользовательского интерфейса и в конечном итоге использует результат запроса для замены содержимого другого элемента.

Источник
Другие вопросы по тегам