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

11.11.2013 01:23

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

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

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

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

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

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

Демо

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

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

Возможности

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

API

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

var c = new CALENDAR( container, options );

container

DOM родитель, в котором будет создан DOM календаря

options

дополнительный настройки:

container	DOM родитель, в котором будет создан DOM календаря
hidden	true для изначальной невидимости DOM календаря, иначе false
hideOnKeysOrMouse	true для скрытия календаря нажатием ESC, или кликом вне его области, иначе false
mhFirst	true для даты в формате мм.дд.гг, иначе false (по умолчанию false)
suFirst	true для недели, начинающейся с воскресения (по умолчанию false)
dateDvd	символ разделения даты (по умолчанию .)
timeDvd	символ разделения времени (по умолчанию :)
lng	язык каленадря: rus русский, eng английский (по умолчанию русский)
userHandler	функция, вызываемая при событиях календаря
zIndex	z-index окна календаря, (по умолчанию 5000)
showTime	true для календаря с временем (по умолчанию false)
ssTime	true для возможности указывать секунды, если календарь с временем (по умолчанию false), имеет эффект только при showTime = true
wheel	1 включено перелистывание колесиком, 2 в любом месте календаря, за исключением, года листает месяц, 0 (по умолчанию 1)

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

CALENDAR.bind( o, options )

JQuery DOM объект или DOM поля ввода

options

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

shiftX и shiftY, shiftXf, shiftYf, relative	аналогично методу show
y4	true для формата года в 4 цифры (по умолчанию false)
autoSet	true при изменении данных в календаре изменяется поле ввода, false поле ввода изменяется только, если кликнуть по дате (по умолчанию false)

Вернет объект:

bindO	объект, на который был применен
cal	объект прикрепленного календаря
list	массив объектов вида { o: DOM объект, cal: объект календаря } - кол-во элементов равно кол-ву вызовов bind всего

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

CALENDAR.embed( $els, options )

$els	DOM-объекты JQuery, или обычный DOM-объект, либо массив из них
options	дополнительный настройки, аналогичны методу bind

Вернет объект:

$els	JQuery коллекция объектов, на которые был применен
cal	объект прикрепленного календаря

Трансформация календаря в выноску

CALENDAR.transformToTip( cal, orientation )

cal	объект календаря
options	ориентация - с какой стороны будет выпадать left/right/top/bottom

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

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

state	true для показа календаря, или false для его скрытия
x и y	координаты окна календаря
o	DOM объект, относительно которого требуется показать окно, может быть опущен - тогда используются только координаты
shiftX и shiftY	смещение по X и Y относительно верхнего правого края DOM объекта в пикселях, имеет эффект только если DOM объект указан
shiftXf и shiftYf	формулы смещения по X и Y возможно использование операций +-/*(), а также: ow - ширина объекта o, oh - высота объекта o, sw - ширина календаря, sh - высота календаря
relative	true к координаты относительно родителя, false относительно документа (по умолчанию)

Под "опущено" подразумевается значение 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 )

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

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

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

   c.get()

Возвращает объект со следующими свойствами:

lng	язык календаря
mhFirst	true если даты вида мм.дд.гг
suFirst	true если воскресенье - первый день недели
showTime	true если календарь со временем
timeWithSecs	true если время с секундами
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)

История версий:

10.12.17	множество исправлений и модернизаций добавлено прикрепление календаря в поле ввода через кнопку (метод embed) добавлена трансформация календаря в выноску
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

Сергей04.05.2018 11:20:04#ответить

Спасибо за отличный календарь, лучше не нашел. Просьба - при адаптивном дизайне выпадание календаря справа от поля ввода на смартфонах недопустимо. По возможности сделайте выпадание под полем ввода. Рассчитывать координаты от правого верхнего угла неудобно, при плавающей длине поля только через js. Это дополнительные действия. Если у Вас получится на сделать автовыпадание вверх если внизу недостаточно места для просмотра календаря - то тогда вообще слов нет)). Еще раз спасибо за отличный скрипт.

Protocoder09.05.2018 15:52:51#ответить

Вам спасибо за отзыв и что пользуетесь :)

Календарь обновил до последней версии.

Что касается адаптивности и границ экрана - это очень просто сделать в обработчике событий.

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

Использовать-же этот экран на мобильнике или чем-то другом такого рода - ИМХО - сомнительное дело, т.к. там должно быть нечто тач-ориентированное (привычное для пользователей, использующих данный девайс).

Написать комментарий