JQuery UI Datepicker: как добавить интерактивные события в определенные даты?

Ответ 1

Это определенно возможно, и, на мой взгляд, не слишком много злоупотреблений виджетами datepicker. Существует возможность инициализировать виджет в строке, который может быть использован именно для описанного выше сценария.

Есть несколько шагов, которые вы должны предпринять:

• Инициализируйте datepicker в строке. Прикрепите виджет datepicker к <div>, чтобы он всегда отображался, и вам не нужно прикреплять его к input:

  $("div").datepicker({...});
  

• Нажмите на beforeShowDay, чтобы выделить даты с конкретными событиями. Кроме того, определите свои события в массиве, который вы можете заполнить и отправить клиенту:

  Массив событий:

  var events = [ 
      { Title: "Five K for charity", Date: new Date("02/13/2011") }, 
      { Title: "Dinner", Date: new Date("02/25/2011") }, 
      { Title: "Meeting with manager", Date: new Date("03/01/2011") }
  ];
  

  Обработчик событий:

  beforeShowDay: function(date) {
      var result = [true, '', null];
      var matching = $.grep(events, function(event) {
          return event.Date.valueOf() === date.valueOf();
      });
  
      if (matching.length) {
          result = [true, 'highlight', null];
      }
      return result;
  },
  

  Это может выглядеть немного сложнее, но все, что он делает, - это подсвечивать даты в datepicker, которые имеют записи в массиве events, определенном выше.

• Определите onSelect обработчик событий, где вы можете указать datepicker, что делать, когда нажимается день:

  onSelect: function(dateText) {
      var date,
          selectedDate = new Date(dateText),
          i = 0,
          event = null;
  
      /* Determine if the user clicked an event: */
      while (i < events.length && !event) {
          date = events[i].Date;
  
          if (selectedDate.valueOf() === date.valueOf()) {
              event = events[i];
          }
          i++;
      }
      if (event) {
          /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
          alert(event.Title);
      }
  }
  

  Опять же, это похоже на много кода, но все, что происходит, это то, что мы находим событие, связанное с нажатой датой. После того, как мы найдем это событие, вы можете выполнить любое действие, которое вы хотите (например, показать всплывающую подсказку)

Вот полный рабочий пример: http://jsfiddle.net/Zrz9t/1151/. Обязательно перейдите в февраль/март, чтобы увидеть события.

Ответ 2

в дополнение к решению Andrew Whitaker существует другой способ сделать это (на самом деле это взлом, но на самом деле его, возможно, идеально подходит для кого-то другого, потому что, возможно, название или дата не всегда являются хорошим идентификатором)

Примечание: сначала прочитайте решение Andrew Whitaker и посмотрите здесь изменения.

// date picker
$("div").datepicker({
    // hook handler
    beforeShowDay: function(tdate) {
        var mydata = $(this).data("mydata");
        var enabled = false;
        var classes = "";
        var title = date;
        $.each(mydata, function() {
            if (this.date.valueOf() === tdate.valueOf()){
                enabled = true;
                classes = "highlight";
                title = title + '" data-id ="'+this.id;// my hack to add additional attributes ;)
            }
        });        
        return [enabled,classes,title];
    },
    // event handler
    onSelect: function() {
        var id = $(this).find(".ui-datepicker-current-day").attr("data-id");
        mydata = $(this).data("mydata"),
        selectedData = null;        
        /* search for data id */
        $.each(mydata,function(){
            if (this.id == id){
                selectedData = this;
            }
        });
        if (selectedData) {
            /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
            alert(selectedData);
        }
    }
}).data("mydata",
    // your data
    [{
        id:1,
        title: "Five K for charity", 
        date: new Date("02/13/2011")
    }, 
    {
        id:2,
        title: "Dinner", 
        date: new Date("02/25/2011")
    }, 
    {
        id:3,
        title: "Meeting with manager", 
        date: new Date("03/01/2011")
    }]);