DatePicker с событиями? - PullRequest
Новая
       13

DatePicker с событиями?

8 голосов
/ 19 февраля 2011

Есть ли плагин jquery, который позволил бы мне иметь маленький календарь, похожий на прямоугольник, как в датчиках, и некоторые даты были бы другого цвета. Когда я перебираю дату с помощью мыши, появляется всплывающее окно с сообщением о том, какое событие запланировано на этот день. Конечно, я бы заполнил массив событий событиями; -)

Все, что я нахожу, это средства выбора даты (маленькие) или календари (полноэкранные большие). Что мне нужно для моей веб-страницы, так это небольшой календарь и простое наведение мыши, которое показывало бы текст, который я хотел бы показать.

Существует ли что-то подобное?

Ответы [ 4 ]

14 голосов
/ 19 февраля 2011

Как уже отмечали другие, это возможно с помощью datepicker .

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

  1. Создать объект, содержащий события, на которые вы можете ссылатьсяиз обработчика событий datepicker: 

    var Event = function(text, className) {
    this.text = text;
    this.className = className;
};

var events = {};
events[new Date("02/14/2011")] = new Event("Valentines Day", "pink");
events[new Date("02/18/2011")] = new Event("Payday", "green");

    Этот код просто создает объект с «ключами», являющимися датой события, и «значениями», являющимися данными события.

  2. Чтобы виджет datepicker постоянно отображался (например, без input), просто примените виджет к div:

    HTML :

    <div id="dates"></div>

    JavaScript : 

    $("#dates").datepicker({....});

  3. Нажмите на событие beforeShowDay и верните соответствующий массив.datepicker автоматически применит подсказку и класс, который вы укажете.Здесь пригодятся Event объекты, которые мы определили выше: 

    $("#dates").datepicker({
    beforeShowDay: function(date) {
        var event = events[date];
        if (event) {
            return [true, event.className, event.text];
        }
        else {
            return [true, '', ''];
        }
    }
});

    Это, пожалуй, самая сложная часть.Обработчик события beforeShowDay ожидает, что вы вернете массив, структурированный так:

    [0] равно true / false, указывая, может ли эта дата быть выбрана, [1] равно классу CSSname (s) или '' для презентации по умолчанию и [2] необязательная всплывающая подсказка для этой даты.

    Итак, мы ищем событие в дату, переданную вфункция, обрабатывающая событие beforeShowDay и возвращающая данные из нашего объекта события, если он существует.

Это выглядит много, но это не так уж плохо, когда вы смотрите на все это вместе,Посмотрите пример здесь: http://jsfiddle.net/andrewwhitaker/rMhVz/1/

Обратите внимание, что классы CSS должны использовать !important для переопределения фона по умолчанию datepicker и фактически применяться к тегам a внутри даты tr S

2 голосов
/ 19 февраля 2011

Используйте jquery UI datepicker . С некоторыми дополнительными jquery вы можете подключить событие mouseover и отобразить информацию.

Даты распознаются с помощью cssclass и информации о вложенности. После показа календаря вы можете прикрепить свой обработчик событий. 

   $(document).ready(function () {
         $("input").datepicker();     
   });

   $('td a').live('mouseenter', function () { 
     alert($(this).text() + ' ' + $('.ui-datepicker-month').text() 
                          + ' ' +$('.ui-datepicker-year').text()  );    
   });

селекторам нужна некоторая точность для правильной работы, но идея остается прежней.

1 голос
/ 19 февраля 2011

В качестве альтернативы средству выбора даты jQuery UI вы можете проверить мое средство выбора даты: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

Похоже, что то, что вы ищете, покрыто функцией renderCalendar: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/renderCalendarBankHolidays.html

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

1 голос
/ 19 февраля 2011

Если вы хотите сделать что-то особенное при наведении на день, вы можете прикрепить обработчик .live (или делегат), необходимо live, так как средство выбора даты создается после того, как dom завершил загрузку, к элементу day и выполняет какое-то поиск, если вам нужно отобразить всплывающую подсказку, поле или что-то еще уникальное в дом. 

$(".ui-datepicker-calendar .ui-state-default").live("hover", function() {
    var month = $(".ui-datepicker-month").text();
    var year = $(".ui-datepicker-year").text();
    var day = $(this).text();
    //Do something to look up the year month day..
    $("h1").empty().text(month + day + year).fadeIn();

}, function() {
  //something on mouse out
});

Простой пример для jsfiddle .

Однако, если вы обнаружите, что средство выбора даты jQuery UI не соответствует вашим потребностям, взгляните на оригинальный плагин datepicker , который предлагает множество настроек. Кроме того, он также предлагает еще несколько событий в DatePicker extension .

...