Календарь javascript (datepicker)

В сети полно чудовищных скриптов для наглядного выбора даты с помощью указателя мыши. Эти скрипты не могут быть не чудовищными по определению, так как созданы для позорной задачи: облегчить жизнь пользователям, не желающим набирать даты цифрами, с клавиатуры. Ну, и программистам, в общем, тоже – чтоб не встать в ступор от введённой с точками даты ("15.06.2011"), когда серверный скрипт знает только чёрточки ("15-06-2011").

Долго я не хотел заниматься этим datepicker'ом. Но клиенты задолбали, и вот наступило "а придётся". Ну, как я уже сказал в начале (не удержался), готовые скрипты в сети в большинстве своём оказались чудовищны. Календарь jQuery, наиболее полный по функционалу, был отбракован из-за чудовищности самой jQuery (ничего личного! :-)). То же и по другим библиотекам – религия не позволяет мне загружать сайты клиентов сотнями килобайт лишнего кода, когда можно обойтись парой сотен строк.

Календарь, о котором речь, – как раз такой случай: весь код занимает немногим более 200 строк (7 К). Вот дистрибутив: calendar_ir2.zip, для работы нужны файлы calendar.js и calendar.css (calendar.htm – для примера).

Подключение

1. Добавить к HEAD HTML-страницы две строчки:

2. Полям ввода (input), в которые надо вставлять даты, назначить класс "date" (<input name='' class='date'>)

Алгоритмы

Массив календаря (месяцы, даты и дни недели) создаётся на один год. При загрузке – на текущий год, при выборе года – на выбранный год.

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

По умолчанию отрисовывается текущий месяц, при выборе месяца – выбранный месяц.

При щелчке по дате дата вставляется в поле ввода. При потере фокуса полем ввода календар исчезает. При нажатии escape – тоже исчезает.

Объект календаря не цепляется к полям ввода – к ним цепляется только onclick, по которому отрисовывается календарь – по умолчанию (текущий год и месяц) или, если дата была выбрана, месяц и год выбранной даты.

В объект window.dict.calendar можно помещать две вещи:

1) разделитель даты (например, чёрточку или точку): dict.calendar.div = '.';

2) массив знаменательных дат и праздников (можно присылать его с сервера):

Знаменательные даты из массива отлавливаются при создании объекта календаря и соответствующие числа помечаются ма-аленькой красненькой меткой, лежащей в папке дистрибутива img, а также датам добавляется title с названием праздника.

Ну, что ещё... Вся локализация определяется в объекте lang внутри функции календаря: формат даты (d-m-Y), названия дней недели, начало недели (понедельник)... Это всё легко можно заменить на чужие реалии. Но зачем?

Рабочий пример: http://ir2.ru/calendar.htm

D.M., admin