Простой JavaScript календарь выбора даты (datepicker)

 Попробуйте ↓

Описание

Календарь выбора даты, также называемый datepicker, написан на JavaScript. Он полностью автономен, т.е. работает без jQuery или каких-либо дополнений, с легкость интегрируется в любой проект. Требования IE 10+

Достаточно подключить скрипт и стиль отображения:

<link rel="stylesheet" type="text/css" href="cssworld.ru-xcal.css" />
<script type="text/javascript" src="cssworld.ru-xcal.js"></script>

Затем добавить в тег:

<input onClick="xCal(this)" onKeyUp="xCal()">

или вызвать для всех тегов с CSS классом .datepicker:

<script>xCal.all("datepicker");</script>

Это все!

Скачать

Скачать JavaScript календарь выбора даты

CSS

GitHub

Описание функций и их параметров


Общая функция xCal(object, delim, order)

Все передаваемые параметры необязательны.

Первый параметр object

В качестве первого параметра можно передавать объект или его ID: xCal(this) или xCal('date2'). При отсутствии каких-либо параметров календарь закрывается. Для получения текущей даты функцию можно вызвать со значением первого параметра равным двойке alert(xCal(2)). Пример.

Второй и третий параметр

Если в качестве второго параметра передается объект, то третий параметр игнорируется. Объект может содержать набор некоторых параметров из таблицы ниже. В ином случае устанавливаются необязательные параметры delim и order (см. описание этих параметров в таблице ниже).

Примеры использования функции xCal():

<input onClick="xCal(this)" onmouseenter="xCal(this)" onClick="xCal()" onKeyUp="xCal()" oninput="xCal()">
<input onClick="xCal(this, '-', 1)" onClick="xCal()" oninput="xCal()">
<input onClick="xCal(this, {lang: 'en', order: 1})" onClick="xCal()" oninput="xCal()">
<strong onClick="alert(xCal(2))">Текущая дата</strong>

Таблица параметров календаря доступных для установки

ПараметрВозможные значенияЗначение по умолчаниюОписание
lang"en", "ru""ru"Язык интерфейса. Возможно добавить необходимые языки в js файл по аналогии с имеющимися
classстрока"xcalend"Имя CSS класса для визуального оформления календаря
delimстрока"."Разделитель между числами дня, месяца и года
order0 - ДД.ММ.ГГГГ,
1 - ГГГГ.ММ.ДД,
2 - ММ.ДД.ГГГГ
0При значении равном единице используется обратный порядок ГГГГ.ММ.ДД, при значении равном двойке используется порядок на американский манер ММ.ДД.ГГГГ, в остальных случаях и по умолчанию ДД.ММ.ГГГГ
idстрокаотсутствуетУникальный ID календаря. При отсутствии используется название из class
autoOn0 - выключено,
1 - включено
1Автоматическое открытие календаря при наведении курсора на поле. Используется функцией xCal.all(). Для ручной установки необходимо в теге использовать onmouseenter="xCal(this)"
autoOff0 - выключено,
1 - включено
1Автоматическое закрытие календаря при выходе курсора за его пределы
now0 - нет, 1 - да1Возможность установки текущей даты в один клик
set00 - нет, 1 - да0Возможность установки значения "00.00.0000" в один клик, в соответствии с установленным значения порядка отображения
x0 - нет, 1 - да1Отображать кнопку "Закрыть"
hide0 - нет, 1 - да1Скрывать календарь после выбора даты
toстрока или элементdocument.bodyМесто размещения календаря.
Если этот параметр является строкой, то используется элемент с указанным ID
fnстрока или функцияотсутствуетВызов функции при выборе даты.
Если задано название функции в виде строки, то в функцию с таким названием передается выбранная дата в качестве единственного параметра.
Если тип этого параметра является функцией, то в нее передается два параметра: выбранная дата и объект со всеми текущими установленными параметрами указанными в данной справочной таблице.

Включение календаря для всех элементов одного класса. Функция xCal.all(className, delim, order)

Функция xCal.all(className, delim, order) предназначена для прикрепления календаря ко всем полям с CSS классом, указанном в первом параметре, className. Эта функция имеет такие же параметры как и у xCal(). Отличается только первым параметром, который должен быть именем CSS класса и является обязательным.

Пример использования функции xCal.all():

// Применить ко всем тегам с классом "xcalend"
xCal.all("xcalend", {
lang: "en", // Английский язык
x: 0, // Убрать кнопку закрытия календаря
delim: "/" // Разделитель между числами наклонная линия
});

Установка умолчаний. Функция xCal.set(options)

Функция xCal.set(options) предназначена для установки значений по умолчанию.

Пример использования функции xCal.set():

// Установка умолчаний для календаря
xCal.set({
lang: "en", // Английский язык
order: 1, // Обратный порядок
delim: "-" // Разделитель между числами тире
});

Примеры использования


Пример 1

Дата выбрана. Кликните по полю с датой для вызова календаря:

<input type="text" value="06.10.2017 20:12:45" size="19" onClick="xCal(this)" onKeyUp="xCal()">

Пример 2

Если поле пустое, то календарь предложит текущую дату. В этом примере также включено автоматическое открытие календаря при наведении курсора на поле:

<input type="text" value="" size="10" onClick="xCal(this)" onmouseenter="xCal(this)" onKeyUp="xCal()">

Пример 3

Календарь открывается при клике по ссылке:
Открыть календарь, Очистить поле, Текущая дата

<input id="date3" type="text" value="" size="10" onClick="xCal()" onKeyUp="xCal()" oninput="xCal()">
<a href="" onClick="xCal('date3'); return false">Открыть календарь</a>,
<a href="" onClick="document.getElementById('date3').value=''; return false">Очистить поле</a>,
<a href="" onClick="document.getElementById('date3').value=xCal(2); return false">Текущая дата</a>

Пример 4

Тоже самое, что и в предыдущем примере, но в обратном порядке и с разделителем тире:
Открыть календарь, Очистить поле, Текущая дата

<input id="date4" type="text" value="" size="10" onClick="xCal()" onKeyUp="xCal()" oninput="xCal()">
<a href="" onClick="return xCal('date4','-',1)">Открыть календарь</a>,
<a href="" onClick="document.getElementById('date4').value=''; return false">Очистить поле</a>,
<a href="" onClick="document.getElementById('date4').value=xCal(2,'-',1); return false">Текущая дата</a>

Пример 5. Использование xCal.all()

В этом примере события назначаются для всех элементов с классом .datepicker:

<input type="text" class="datepicker" placeholder="Поле 1">
<input type="text" class="datepicker" placeholder="Поле 2">
<script>xCal.all("datepicker");</script>

Пример 6

Функцию можно применить к любому тегу. Последний результат всегда будет содержаться в xCal.value.
Нажмите ТУТ или ЗДЕСЬ и последний выбранный результат можно всегда посмотреть по этой ссылке.
А это результат только для "ТУТ".

Нажмите <b id="date6" onClick="xCal('date6')">ТУТ</b> или
<b class="xcal">ЗДЕСЬ</b>
и последний выбранный результат можно всегда посмотреть по
<a href="" id="date6" onClick="alert(xCal.value); return false">этой ссылке</a>.
А это результат только для "<a href="" id="date6"
onClick="alert(document.getElementById('date6').value);
return false"><b>ТУТ</b></a>"

Пример 7. Использование xCal.set()

Можно динамически менять умолчания параметров. Для смены языка во всех приведенных примерах выше, кроме случаев, где явно указано в передаваемом параметре, нажмите на поле:

<input type="text" size=3 value="RUS"
onClick="if(this.value==='RUS'){this.value='ENG';xCal.set({lang: 'en'})} else {this.value='RUS';xCal.set({lang: 'ru'})}"
style="cursor: pointer" readonly>

Пример 8. AJAX

Использование своих функций. Данный пример подходит для AJAX. Замените "alert" на свою функцию:

<div id="date8"></div>
<style>#cssworldru8{position: static}</style>
<script>
xCal("date8", {
id: "cssworldru8", // Задать уникальный ID
"class": "xcalend", // CSS класс оформления внешнего вида
hide: 0, // Не скрывать календарь
x: 0, // Отключить кнопку закрытия календаря
autoOff: 0, // Отключить автоматическое скрытие
to: "date8", // Разместить календарь внутри элемента с id=date8
fn: "alert" // Вызвать функцию с указанным названием, в нее будет передан результат выбора
});
</script>

CSS

.xcalend {
position: absolute;
z-index: 999;
width: 150px;
line-height: 1.2em;
font-size: 15px;
text-align: center;
background: #fff;
border: 2px solid #ddd;
padding: 5px;
}
.xcalend td {
cursor: pointer;
padding: 5px;
}
.xcalend thead td {
color: #333;
}
.xcalend thead tr:last-child td {
font-size: 12px;
background: #fff;
color: #555;
cursor: default;
}
.xcalend tbody td {
color: #025;
}
.xcalend tfoot td {
color: #333;
}
.xcalend tbody td.tday {
background: #eee;
font-weight: bold;
}
.xcalend tbody td:hover, .xcalend td:hover {
background: #025;
color: #acf;
}
.xcalend tbody td:nth-child(n+6) {
color: #e78c5c;
}
.xcalend .cal-first td:nth-last-child(-n+2) {
color: #e78c5c;
}
.xcalend tbody td.today {
background: #d00;
color: #fff;
font-weight: bold;
}
.xcalend tbody td.bold {
font-weight: bold;
}
.xcalend tbody td.cal-l b, .xcalend tbody td.cal-r b {
display: none;
}
.xcalend tbody td.cal-l:hover b, .xcalend tbody td.cal-r:hover b {
display: inline;
}
.xcalend a {
text-decoration: none;
}
.xcalend th a {
color: #ccc;
display: block;
padding: 5px 0;
}