Компонент календаря на JavaScript

Автор: admin - Комментариев: 19

Чуть более двух лет назад мне понадобилось написать компонент календаря и прикрутить его к своей CMS. От идеи использования динамического календаря на PHP я сразу отказался. Поскольку нужен был календарь для вставки даты в поля формы. Первое, что я сделал, начал искать готовые решения. Естественно было и много и красивых. Но, как известно, есть пословица “Свой хлеб вкуснее”. И тут мне пришла идея о создании своего календаря. И написать его хотелось только с использованием DOM. В итоге получился календарик, не зависящий от браузеров и разный Фреймворков. Вот собственно который, я и выкладываю для использования.

Все настройки по стилям соответственно находятся в файле calendar.css. Сам скрипт в файле calendar.js.

Для использования компонента, добавляем в HTML код следующее:

  1. Подключаем файл со стилями – <link href=“calendar.css” rel=“stylesheet” type=“text/css” />;
  2. Далее подключаем файл со скриптом календаря – <script type=“text/javascript” src=“calendar.js”></script>;
  3. Затем вставляем в уже предполагаемую ранее созданную форму, поле для даты и объявляем в нем необходимые атрибуты – <input type=“text” name=“date” readonly=“readonly” onclick=“showcalendar(this)”/>.

При клике по полю input у вас должен открыться календарь, чтобы его закрыть еще раз кликните по полю input или выберите дату.

Компонент динамического календаря

Для изменения разделителя даты, открываем файл calendar.js и ищем функцию showcalendar. В этой функции находим строку var ar = input.value.split(‘.’) и вместо точки прописываем свой разделитель. Для изменения формата даты, открываем все тот же файл calendar.js и ищем функцию generateCalendar. В этой функции находим строку input.value = d + ‘.’ + m + ‘.’ + date.getFullYear(). И изменяем формат вывода по своему требованию. Правда еще тогда придется изменить порядок следования параметров в строке date = new Date (ar[2], ar[1] — 1, ar[0]). Первым параметром должен быть год, вторым – месяц и третий параметр это число дня недели. В JavaScript месяца идут с 0 до 11, поэтому от номера месяца необходимо отнять единицу. Скачать компонент календаря можно здесь.