Календарь для ввода месяца и года на JavaScript

18.08.2015 22:26

Понадобилось тут странное - календарь для выбора только месяца и года. Написал простенький контрольчик. Появляется при клике на указанный DOM объект. Можно указать, с какой стороны объекта вылазить.

Причесанную версию, к сожалению, выложить не могу - ибо ушел в продакшн, ну а не причесанную - выкладываю.

Код короткий, понятный - причесать - дело 5 минут. Главное – работает нормально даже не причесанный :)

События можно поглядеть в консоли браузеры.

Вот оно

Нажми Меня

API

Создание

var ym = ymCal(
	obj,
	container,
	direction,
	month,
	year,
	handler,
	zindex,
	distance
);

obj	DOM объект, при клике на котором будет показываться календарь
container	DOM объект, где будет располагаться DOM календаря (может быть опущен - тогда будет body)
direction	строка, обозначающая направление открытия left, right, top, bottom (может быть опущен - тогда будет right)
month	выбранный месяц (может быть опущен - тогда будет текущий месяц или 0 - тогда будет не выбран)
year	выбранный год (может быть опущен - тогда будет текущий год или 0 - тогда будет не выбран)
handler	функция обработки событий (может быть опущена)
zindex	z-index основного слоя календаря(может быть опущен - тогда будет 100)
distance	смещение относительно выбранного направления открытия, возможно отрицательное (может быть опущено - тогда будет 5 px)

Возвращает объект с методами для данного календаря.

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

Функция обработки событий

function eventsHandler( event, month, year, misc ) { ... }

event

created	создание
show	показ
hide	скрытие
ok	нажатие кнопки ОК
cancel	нажатие кнопки ОТМЕНА
outside	нажатие вне календаря

month

выбранный месяц (0 если не выбран)

year

выбранный год (0 если не выбран)

misc

точно такой-же объект, как возвращаемый методом get

Методы: очистить

ym.clear();

Снимает выбор месяца и года.

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

ym.get();

Вернет объект со значениями календаря:

cMonth	текущий месяц
cYear	текущий год
sYear	минимальный показываемый год
month	выбранный месяц или 0, если нет
year	выбранный год или 0, если нет
obj	DOM объект, при клике на который показывается календарь
dom	DOM объект календаря
interface	указатель на объект с методами календаря

Методы: установить значение

ym.set( month, year, sYear, cMonth, cYear );

Устанавливает внутренние значения календаря:

cMonth	текущий месяц
cYear	текущий год
month	выбранный месяц или 0, если нет
year	выбранный год или 0, если нет
sYear	минимальный показываемый год

Любое из значений можно опустить - тогда оно не будет изменено.

Методы: показать

ym.show( state );

Показывает / скрывает календарь:

state

true - показать, false - скрыть

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

Все файлы календаря одним архивом.

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

18.08.15

первый публичный релиз

скачать

18.08.2015, Protocoder

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