Customized datepicker

Я большой любитель jQuery, но даже я вынужден признать убогость jQueryUI по сравнению например с YUI. Чего стоит только невозможность убрать [x] (кнопка закрыть) стандартными средствами в виджете Dialog. Но YUI тоже был написан не за день и прежде чем он стал таким как мы видем его сейчас к нему было написано множество хаков поэтому я считаю что нет ничего плохого чтобы хачить JUI не лазя в его код.

Как убирать [x] я уже описывал в своем блоге, а сейчас я хочу поговорить о виджете Calendar или как он называется в JUI — Datepicker. Идея приспособить его к календарю WP не нова но вот незадача на Datepicker'e нельзя отмечать даты. То есть вообще нельзя выделить день кроме текущего и выходных. Это большой минус, и сейчас я вам покажу как этот минус превратить в плюс.

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

1. (function($) {
2.  
3.     /**
4.      * autor: CTAPbIu_MABP
5.      * email: ctapbiumabp@gmail.com
6.      * site: mabp.kiev.ua/2009/08/11/customized-datepicker
7.      * license: MIT & GPL
8.      * last update: 11.08.2009
9.      * version: 1.0
10.      */
11.     
12.     // сохраняем старые функции
13.     var old_datepicker = $.fn.datepicker;
14.     var old_generateHTML = $.datepicker._generateHTML;
15.  
16.     // и делигируем их новым
17.     $.datepicker._generateHTML = function(inst) {
18.         // получаем календарь ввиде raw-html
19.         var _generateHTML = old_generateHTML.apply(this, arguments),
20.         // выгребаем даты для этого календаря
21.         dates = inst.settings.hightlight.values;
22.         titles = inst.settings.hightlight.titles;
23.         
24.         // и начинаем расскрашивать
25.         for (var i in dates){
26.             if (dates[i].getFullYear() == inst.drawYear && dates[i].getMonth() == inst.drawMonth){
27.                 _generateHTML = _generateHTML.replace(
28.                 // магия регулярок
29.                 new RegExp('<a class="([^"]+)" href="#">' + dates[i].getDate() + '</a>','i'),
30.                 function(link, classes){
31.                     // еще больше магии
32.                     return link.replace(classes, classes + ' ui-state-custom' +
33.                         (titles[i] ? '" title="'+ titles[i] : ''));
34.                 });
35.             }
36.         }
37.         return _generateHTML;
38.     };
39.     
40.     // делегируем конструктор
41.     $.fn.datepicker = function(options){
42.         // новые опции преобразовываем к объекту
43.         options.hightlight = $.extend(
44.             {format:$.datepicker._defaults.dateFormat, values:[], titles:[], settings:{}},
45.             options.hightlight
46.         );
47.         
48.         // сразу превращаем даты в объекты типа Date для того чтобы сохранить
49.         options.hightlight.values = $.map(options.hightlight.values, function(value){
50.             return $.datepicker.parseDate(options.hightlight.format, value, options.hightlight.settings);
51.         });
52.         
53.         return old_datepicker.apply(this, [options]);
54.     };
55. })(jQuery);

* This source code was highlighted with Source Code Highlighter.

На то что там в коде особо не замарачиваемся а рассматриваем пример использования

Добаляем новый класс в CSS
.ui-state-custom {
border: 1px solid #f0f !important;
}


И создаем датапикер с новыми параметрами

1. $("div#datepicker").datepicker({ // inline datepicker
2.     firstDay: 1 , // первый день понедельник
3.     hightlight : { // подсвечиваем
4.         format:"dd/mm/yy", // формат в котором указаны даты, понимает все форматы которые понимает datepicker, по умолчанию равен $.datepicker._defaults.dateFormat или mm/dd/yy
5.         values:["1/08/2009","5/08/2009","15/08/2009"], // список дат в том формате который мы тока что указали в прошлом параметре
6.         titles:["Рас","Два","Три"], // если хотите можно указать список всплывающих подсказок для дат
7.         settings:{} // дополнительные параметры для функции преобразования строк в дату можно посмотреть в комментариях к коду датапикера
8.     }
9. });

* This source code was highlighted with Source Code Highlighter.

В действии можно посмотреть на моем блоге