Jquery BEL_Calendar


Данный плагин jquery календаря, способен работать с элементами форм, например как с input, select, textarea, так и с тегами div, span и т.д. Этот календарь можно легко подключить на сайт, и полностью изменить его под стиль Вашего сайта. Плагин пока идет с одним стилем, но в будущем, возможно, добавим еще. Из основных особенностей данного плагина хочу отменить наличие настраиваемых произвольных форматов даты и времени, схожими функцией языка php - date(); Обо всем, на что способен плагин, и как его установить, я опишу ниже.

Скачать:

Дня начала Вам необходимо скачать сам плагин и последнюю версию jquery.
Jquery вы можете скачать с официального сайта: Jquery
Плагин BEL_Calendar непосредственно с нашего сайта:
Версия: 0.1 Beta: Скачать плагин | Скачать стили

Подключение:

Внутри открытого тега head подключаем файлы jquery.BEL_Calendar.js и jquery.BEL_Calendar.css

<script type="text/javascript" src="jquery.BEL_Calendar.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.BEL_Calendar.css">

Не забываем, что это плагин к jquery, поэтому подключение должно проходить после подключения jquery

Далее календарь нужно подключить к элементу формы или к тегу. Для этого нам нужно присвоить ему класс. Например: BEL_Calendar

<input class="BEL_Calendar" value="24.01.2014 04:00:00">
<div class="BEL_Calendar">24.01.2014 04:00:00</div>

Для инициализации календаря по классу BEL_Calendar необходима всего одна строка кода

$('.BEL_Calendar').BEL_Calendar();

Во время подключения календаря, можно передать объект с параметрами (ниже показаны стандартные значения)

$('.BEL_Calendar').BEL_Calendar({
	ContainerID: 'BEL_calendar',
	OptionClassName: 'BEL_Calendar_option',
	SetType: 0,
	Format: "d.m.Y H:i:s",
	FormatTitle: 'D d F Y',
	DaysOfWeekShort: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
	DaysOfWeekFull: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
	DaysOfSuffix: ['st','nd','rd','th'],
	MonthFull: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
	MonthShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июль','Авг','Сен','Ост','Ноя','Дек'],
	AntePostDown: ['am','pm'],
	AntePostUp: ['AM','PM'],
	HourName: 'Часы',
	MinuteName: 'Минуты',
	SecondName: 'Секунды',			
	SetValue:function(){}
});

Ниже приведена таблица с описание этих параметров

Параметр Описание
ContainerID ID контейнера календаря.
OptionClassName Класс для тега option, в котором будет хранится выбранная в календаре дата, если Вы подключаете календарь к тегу select.
SetType Тип календаря
0 - без выбора времени
1 - выбор даты и времени
2 - только время.
Format Формат вывода даты. Символы, используемые в этом поле, описаны ниже в таблице "Таблица символов используемых в параметре Format". Дата в теге, к которому подключен календарь, так же должна быть написана в данном формате, иначе парсер не сможет правильно прочитать дату. Если дата в теге не соответствует формату, она будет автоматически заменена на текущую во время вызова календаря.
FormatTitle Формат подсказки, всплывающей при наведении на дату, по умолчанию имеет следующий вид "Ср 01 Январь 2014"
Символы, используемые в этом поле, описаны ниже в таблице "Таблица символов используемых в параметре Format".
DaysOfWeekShort Массив, в котором описаны дни недели. Короткий вариант. В массиве 7 значений. Значения используются для символа D.
DaysOfWeekFull Массив, в котором описаны дни недели. Полный вариант. В массиве 7 значений. Значения используются для символа l.
DaysOfSuffix Массив, в котором описаны английские суффиксы. В массиве 4 значения. Значения используются для символа S.
MonthFull Массив, в котором описаны месяца. Полный вариант. В массиве 12 значений. Значения используются для символа F.
MonthShort Массив, в котором описаны месяца. Короткий вариант. В массиве 12 значений. Значения используются для символа M.
AntePostDown Массив, am pm. Нижний регистр. В массиве 2 значения. Значения используются для символа a.
AntePostUp Массив, AM PM. Верхний регистр. В массиве 2 значения. Значения используются для символа A.
HourName Название поля "выбора часов".
MinuteName Название поля "выбора минут".
SecondName Название поля "выбора секунд".
SetValue Событие, вызываемое во время изменения даты. Первым параметром идет новое значение согласно формату.

Таблица символов используемых в параметре Format:

В таблице описаны символы, и значения, которые они выводят. Их взаимодействие с парсером. Если в столбце "парсер" стоит прочерк, то значения будет игнорироваться.

Символ Описание Пример Парсер
Y Порядковый номер года, 4 цифры Примеры: 1970 Считывает
y Порядковый номер года, 2 цифры Примеры: 70 Считывает
L Признак високосного года 1 - високосный,
0 - нет.
-
m Порядковый номер месяца с ведущим нулём 01 - 12 Считывает
n Порядковый номер месяца без ведущего нуля 1 - 12 Считывает
F Полное наименование месяца Январь -
Декабрь
Считывает
M Короткое наименование месяца Янв - Дек Считывает
t Количество дней в указанном месяце 28 - 31 -
W Порядковый номер недели года. Неделя начинается с понедельника Например: 42 -
N Порядковый номер дня недели. Неделя начинается с понедельника 1 - 7 -
w Порядковый номер дня недели. Неделя начинается с воскресения 0 - 6 -
l Полное текстовое представление дня недели Воскресенье -
Суббота
-
D Короткое текстовое представление дня недели Вс - Сб -
d День месяца, 2 цифры с ведущим нулём 01 - 31 Считывает
j День месяца без ведущего нуля 1 - 31 Считывает
S Английский суффикс порядкового числительного дня месяца st, nd,
rd, th
-
z Порядковый номер дня в году 0 - 365 Считывает
H Часы в 24-часовом формате с ведущим нулём 00 - 23 Считывает
h Часы в 12-часовом формате с ведущим нулём 01 - 12 -
G Часы в 24-часовом формате без ведущего нуля 0 - 23 Считывает
g Часы в 12-часовом формате без ведущего нуля 1 - 12 -
a Ante meridiem (англ. "до полудня") или Post meridiem (англ. "после полудня") в нижнем регистре am или pm -
A Ante meridiem или Post meridiem в верхнем регистре AM или PM -
i Минуты с ведущим нулём 00 - 59 Считывает
s Cекунды с ведущим нулём 00 - 59 Считывает

Использование:

Прежде всего нам необходимо определится с форматом даты, который мы будем использовать. По умолчанию в календаре установлен формат d.m.Y H:i:s - это значит, что дата будет иметь следующий вид 01.01.2014 12:10:10, дата(день месяц год) и время через пробел(час минута секунда). Точно в таком же виде дата должна быть сразу прописана в тег, например:

<input class="BEL_Calendar" value="01.01.2014 12:10:10">

Календарь BEL_Calendar позволяет задавать любые форматы даты и может считывать и установить календарь на прописанную в поле дату. Важным условием является валидная установка формата и возможность чтения ее парсером. Если парсер не может прочитать дату, или все символы в дате игнорируются парсером, то в колендаре будет установлена текущая дата и время.

Например, если нужно что бы календарь открыл указанный год, в строке формата должен присуствовать символ Y или y. При этом символ Y (2014) - выставит точно указанный год, то символ y (70) - укажет на 2070, если например подразумевался 1970. Так же парсер может считать название месяца из даты, например 01 Сентябрь 2014 - d.F.Y название данного месяца должно совпасть с названием в массиве, в параметре MonthFull. И так же с коротким название месяца.

Самый распространенный вариант, это использование с тегом input, но так же можно использовать с select, в который можно записать несколько значений для выпадающего списка. Календарь в этом случае откроется сбоку от списка.

Эти и еще несколько примеров Вы можете посмотреть тут

Если Вы нашли недоработки, баги, или хотите предложить расширить функционал плагина, пишите мне на почту info@byteeightlab.ru в теме с названием плагина или здесь в комментариях.

  • article Byte Eight Lab Jquery BEL_Calendar 132