jQuery UI Datepicker: как добавить кликабельные события на определенные даты? - PullRequest
Новая
       22

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

37 голосов
/ 07 апреля 2011

Я хочу выделить даты в jquery datepicker, где к нему прикреплены события (я говорю не о событии js, а о реальных событиях: D).

  1. Как передать даты событий в календарь?
  2. Как сделать его кликабельным, либо отображать события (ы) с их URL в небольшом всплывающем подсказке, либо переходить на страницу событий?

Есть ли уже доступные плагины или ресурсы (например, учебные пособия), чтобы помочь мне достичь этого, пожалуйста?

Спасибо.

PS: Я не используюсредство выбора даты, чтобы выбрать дату, только для доступа к событиям, прикрепленным к дате

PS2: я буду использовать его на многоязычном веб-сайте (франц. и англ.), поэтому я подумал о DatePicker

Ответы [ 2 ]

64 голосов
/ 07 апреля 2011

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

Вам необходимо выполнить несколько шагов:

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

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

  2. Нажмите на 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;
},

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

  3. Определите обработчик событий onSelect, в котором вы можете указать указателю даты, что делать при нажатии на день: 

    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/. Обязательно перейдите кФевраль / март, чтобы увидеть события.

4 голосов
/ 04 декабря 2012

в дополнение к 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")
    }]);
...