Календарь на JavaScript

Пытался найти нормальный календарь для одного проекта и... так и не нашел.

Т.е. они есть, много - есть крутые и функциональные, есть с возможностью выбора диапазона дат, есть с возможностью выбора языка, но вот чтобы был базовый функционал + языки + время + простота в использовании - я не нашел.

Конечно может плохо искал - если кто-то знает какие-либо варианты - очень хочется увидеть в комментах к статье.

Требования к календарю

  • возможность быстрого "прикрепления" на поле ввода
  • возможность выбора типа календаря - со временем или без
  • возможность указать требуются ли секунды в календаре со временем, или только часы и минуты
  • возможность выбора языка (рус/анг)
  • возможность вбора формата даты (дд.мм.гг/мм.дд.гг)
  • возможность указать первый день недели (пн/вс)

Что получилось

Демо

календарь на русском



календарь на английском




Возможности

  • быстрое "прикрепления" на поле ввода
  • выбор типа календаря - со временем или без
  • выбор типа времени - с секундами или без
  • возможность выбора языка (рус/анг)
  • возможность выбора формата даты (дд.мм.гг/мм.дд.гг)
  • выбор первого дня недели (пн/вс)
  • при вращении роликом на календаре - меняются месяцы
  • при вращении на времени - меняется соответствующий разряд времени
  • при нажатии на месяц / год появляются соответствующие списки
  • в списке месяцев они пронумерованы для более удобного поиска по номеру месяца
  • при нажатию на кнопку с точкой мгновенно выбирается текущая дата + время
  • без картинок и дополнений к jQuery

API


Создание, как объекта

var c = new CALENDAR( container, options );

containerDOM родитель, в котором будет создан DOM календаря
optionsдополнительный настройки:

containerDOM родитель, в котором будет создан DOM календаря
hiddentrue для изначальной невидимости DOM календаря, иначе false
hideOnKeysOrMousetrue для скрытия календаря нажатием ESC, или кликом вне его области, иначе false
mhFirsttrue для даты в формате мм.дд.гг, иначе false (по умолчанию false)
suFirsttrue для недели, начинающейся с воскресения (по умолчанию false)
lngязык каленадря: rus русский, eng английский (по умолчанию русский)
userHandlerфункция, вызываемая при событиях календаря
zIndexz-index окна календаря, (по умолчанию 5000)
showTimetrue для календаря с временем (по умолчанию false)
ssTimetrue для возможности указывать секунды, если календарь с временем (по умолчанию false), имеет эффект только при showTime = true

Прикрепление к полю ввода

CALENDAR.bind( o, options )

oDOM поля ввода
optionsдополнительный настройки, аналогичны объекту + дополнительные:

shiftX и shiftYсмещение по X и Y окна календаря относительно верхнего правого края поля ввода в пикселях (по умолчанию 3 и 5)
y4true для формата года в 4 цифры (по умолчанию false)


Методы: показать / скрыть календарь

c.show( state, x, y, o, shiftX, shiftY )

statetrue для показа календаря, или false для его скрытия
x и yАбсолютные координаты окна календаря
oDOM объект, относительно которого требуется показать окно, может быть опущен - тогда используются только координаты
shiftX и shiftYсмещение по X и Y относительно верхнего правого края DOM объекта в пикселях, имеет эффект только если DOM объект указан

Под "опущено" подразумевается значение undefined или null.

Если DOM объект указан, то координаты x и y будут модифицированы так:

x = x + o.offsetWidth + shiftX
y = y + shiftY


Методы: установить данные и обновить календарь

c.fill( month, year, hours, mins, secs, day, dayMonth, dayYear )

monthпоказываемый месяц календаря
yearпоказываемый год календаря
hours, mins и secsпоказываемое время календаря
day, dayMonth, dayYearвыбранная дата календаря

Любой параметр может быть опущен (т.е. быть undefined или null) - в этом случае, если в календаре этот параметр уже был установлен - возьмется он, если нет - он возьмется из текущей даты.

Под "опущено" подразумевается значение undefined или null.


Методы: установить данные принудительно

c.set( refresh, month, year, hours, mins, secs, day, dayMonth, dayYear )

refreshtrue если после установки данных надо вызвать метод fill, иначе false
month и yearпоказываемая дата календаря
hours, mins и secsпоказываемое время календаря
day, dayMonth, dayYearвыбранная дата календаря

Если параметр задан (отличен от undefined) - будет установлен "как есть", без проверок, иначе будет пропущен.


Методы: получить данные

   c.get()   

Возвращает объект со следующими свойствами:
lngязык календаря
mhFirsttrue если даты вида мм.дд.гг
suFirsttrue если воскресенье - первый день недели
showTimetrue если календарь со временем
timeWithSecstrue если время с секундами
month, yearпоказываемая дата календаря
hours, mins и secsпоказываемое время календаря, могут быть null, если календарь без времени или оно не выбрано
day, dayMonth, dayYearвыбранная дата календаря, могут быть null, если дата не выбрана


Методы: функция событий userHandler

function( c, type, month, year, hours, mins, secs, day, dayMonth, dayYear ) {
...
}

cобъект календаря
typeтип события календаря
month, yearпоказываемая дата календаря
hours, mins и secsпоказываемое время календаря, могут быть null, если календарь без времени или оно не выбрано
day, dayMonth, dayYearвыбранная дата календаря, могут быть null, если дата не выбрана

Тип события может быть:
dayвыбрана дата в календаре
hours, mins или secsвыбрано или изменено время календаря
month или yearизменен отображаемый месяц или год календаря

Скачать cal.zip, версия от 20.02.14

Все файлы календаря одним архивом.
Плюс стандартный скин (cal.css) и "строгий" скин (calRigorous.css)
История версий:

06.11.14
  • исправлен баг с закрытием календаря по клику на него в Chrome при использовании метода bind
20.02.14
  • добавлен метода bind, позволяющий прикреплять календарь к полю ввода
  • небольшая ревизия кода
11.11.13
  • первый релиз
скачать

11.11.2013, Protocoder
Люба04.11.2014 20:10:50#ответить
Глючит в chrome! :( При клике на дату просто пропадает.
Protocoder06.11.2014 15:47:21#ответить
Спасибо за ошибку, забыл про отсутствие в Chrome "explicitOriginalTarget", когда делал метод "bind".

Исправил. Сейчас все работает. Версию для скачивания обновил.
AZAT11.01.2017 14:23:07#ответить
А можно ли ограничить выбор дат?
Protocoder15.01.2017 14:11:21#ответить
Используя userHandler можно - т.е. при попытке выбора даты userHandler будет вызван с type = "day" - соответственно, получив дату выходящую за нужные пределы через fill / set можно отменить ее выбор, установив day пустым.
Александр11.04.2017 12:50:18#ответить
Спасибо за красивый и удобный календарь! Скажите, а какие правила использования Вашего календаря? Т.е. можно ли использовать его в внутрикорпоративных, некоммерческих решениях?
Protocoder11.04.2017 19:50:22#ответить
Очень рад, что понравился календарь.
Как раз и делал его, так как не нашел простой и хорошей альтернативы.

Все мои исходники распространяются по лицензии Creative Commons BY-NC.
Почитать про нее можно здесь: https://creativecommons.org/licenses/by-nc/3.0/deed.ru
Написать комментарий