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

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

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

Я также прошел через документацию jQuery UI API виджета 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>
7
datepicker javascript jquery jquery-ui jquery-widgets

2 ответов

beforeShowDay

функции beforeShowDay используется для добавления определенного класса CSS в каждую ячейку datepicker при выполнении определенного условия. В вашем случае это условие " если точное 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 datepicker даты, которая начинается с 01/01/1970. Вы можете изменить это значение на реальные даты событий четырьмя способами:

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

это часть, где thisdate выполняется поиск в пределах ранее определенных дат. Вот,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) звонок.

3

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

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

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

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

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

2