- Простой JavaScript календарь выбора даты (datepicker)
- Скачать
- Описание функций и их параметров
- Общая функция xCal(object, delim, order)
- Первый параметр object
- Второй и третий параметр
- Таблица параметров календаря доступных для установки
- Включение календаря для всех элементов одного класса. Функция xCal.all(className, delim, order)
- Установка умолчаний. Функция xCal.set(options)
- Примеры использования
- Пример 1
- Пример 2
- Пример 3
- Пример 4
- Пример 5. Использование xCal.all()
- Пример 6
- Пример 7. Использование xCal.set()
- Пример 8. AJAX
- CSS
- Datepicker.js
- Ranged & Time Picker
- Data Attributes & Constraints
- Advanced Customizations
- Options
- Methods
Простой JavaScript календарь выбора даты (datepicker)
Календарь выбора даты, также называемый datepicker, написан на JavaScript. Он полностью автономен, т.е. работает без jQuery или каких-либо дополнений, с легкость интегрируется в любой проект. Требования IE 10+
Достаточно подключить скрипт и стиль отображения:
или вызвать для всех тегов с CSS классом .datepicker:
Скачать
Описание функций и их параметров
Общая функция xCal(object, delim, order)
Все передаваемые параметры необязательны.
Первый параметр object
В качестве первого параметра можно передавать объект или его ID: xCal(this) или xCal(‘date2’). При отсутствии каких-либо параметров календарь закрывается. Для получения текущей даты функцию можно вызвать со значением первого параметра равным двойке alert(xCal(2)). Пример.
Второй и третий параметр
Если в качестве второго параметра передается объект, то третий параметр игнорируется. Объект может содержать набор некоторых параметров из таблицы ниже. В ином случае устанавливаются необязательные параметры delim и order (см. описание этих параметров в таблице ниже).
Примеры использования функции xCal():
)" onClick="xCal()" oninput="xCal()"> Текущая дата
Таблица параметров календаря доступных для установки
Параметр | Возможные значения | Значение по умолчанию | Описание |
---|---|---|---|
lang | «en», «ru» | «ru» | Язык интерфейса. Возможно добавить необходимые языки в js файл по аналогии с имеющимися |
class | строка | «xcalend» | Имя CSS класса для визуального оформления календаря |
delim | строка | «.» | Разделитель между числами дня, месяца и года |
order | 0 — ДД.ММ.ГГГГ, 1 — ГГГГ.ММ.ДД, 2 — ММ.ДД.ГГГГ | 0 | При значении равном единице используется обратный порядок ГГГГ.ММ.ДД, при значении равном двойке используется порядок на американский манер ММ.ДД.ГГГГ, в остальных случаях и по умолчанию ДД.ММ.ГГГГ |
id | строка | отсутствует | Уникальный ID календаря. При отсутствии используется название из class |
autoOn | 0 — выключено, 1 — включено | 1 | Автоматическое открытие календаря при наведении курсора на поле. Используется функцией xCal.all(). Для ручной установки необходимо в теге использовать onmouseenter=»xCal(this)» |
autoOff | 0 — выключено, 1 — включено | 1 | Автоматическое закрытие календаря при выходе курсора за его пределы |
now | 0 — нет, 1 — да | 1 | Возможность установки текущей даты в один клик |
set0 | 0 — нет, 1 — да | 0 | Возможность установки значения «00.00.0000» в один клик, в соответствии с установленным значения порядка отображения |
x | 0 — нет, 1 — да | 1 | Отображать кнопку «Закрыть» |
hide | 0 — нет, 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
Дата выбрана. Кликните по полю с датой для вызова календаря:
Пример 2
Если поле пустое, то календарь предложит текущую дату. В этом примере также включено автоматическое открытие календаря при наведении курсора на поле:
Пример 3
Открыть календарь, Очистить поле, Текущая дата
Пример 4
Тоже самое, что и в предыдущем примере, но в обратном порядке и с разделителем тире:
Открыть календарь, Очистить поле, Текущая дата
Открыть календарь, Очистить поле, Текущая дата
Пример 5. Использование xCal.all()
В этом примере события назначаются для всех элементов с классом .datepicker:
Пример 6
Функцию можно применить к любому тегу. Последний результат всегда будет содержаться в xCal.value.
Нажмите ТУТ или ЗДЕСЬ и последний выбранный результат можно всегда посмотреть по этой ссылке.
А это результат только для «ТУТ«.
Нажмите ТУТ или этой ссылке. А это результат только для "ТУТ"
Пример 7. Использование xCal.set()
Можно динамически менять умолчания параметров. Для смены языка во всех приведенных примерах выше, кроме случаев, где явно указано в передаваемом параметре, нажмите на поле:
)> else)>" style="cursor: pointer" readonly>
Пример 8. AJAX
Использование своих функций. Данный пример подходит для AJAX. Замените «alert» на свою функцию:
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
✖Получай Биткоины пассивно!
Заставь время работать на себя!
Самый простой, надежный и проверенный способ растущего пассивного дохода без вложений, затрат времени и изучения.
Делай сегодня то, что другие не хотят, или не знают, и завтра сможешь жить так, как другие не смогут. Всего одно простое решение ведет к большим переменам.
Datepicker.js
Select multiple dates. Click & drag to toggle a range of dates.
var multi = new Datepicker('#multi', < multiple: true >);
Ranged & Time Picker
Set to inline on hidden inputs.
var ranged = new Datepicker('#ranged', < inline: true, ranged: true, time: true >);
Data Attributes & Constraints
Data attributes override options.
var constrained = new Datepicker('#constrained', < // 10 days in the past min: (function()< var date = new Date(); date.setDate(date.getDate() - 10); return date; >)(), // 10 days in the future max: (function()< var date = new Date(); date.setDate(date.getDate() + 10); return date; >)() >);
Advanced Customizations
Alter templates & add classNames for custom styles.
.datepicker.custom < display: block; >.datepicker.custom table th < color: #888; >.datepicker.custom .datepicker__wrapper < background: #333; width: 100%; padding: 0; >.datepicker.custom .datepicker__pane < float: left; width: 33.333%; padding: 0.5rem; >.datepicker.custom .datepicker__pane:not(:first-child) .datepicker__prev, .datepicker.custom .datepicker__pane:not(:last-child) .datepicker__next < display: none; >.datepicker.custom .datepicker__day div:hover, .datepicker.custom .datepicker__day.is-highlighted:not(.is-selected) div < background: #444; >.datepicker.custom .datepicker__daynum < color: white; >.datepicker.custom .datepicker__day.is-selected div:hover < background: #2196F3; >.datepicker.custom .datepicker__day.is-disabled.is-selected div, .datepicker.custom .datepicker__day.is-otherMonth.is-selected div, .datepicker.custom .datepicker__day.is-disabled.is-selected + .is-selected div::before, .datepicker.custom .datepicker__day.is-otherMonth.is-selected + .is-selected div::before < background: #444; >.datepicker.custom .datepicker__day.is-disabled .datepicker__daynum, .datepicker.custom .datepicker__day.is-otherMonth .datepicker__daynum < color: #444; >.datepicker.custom .datepicker__day.is-disabled.is-selected .datepicker__daynum, .datepicker.custom .datepicker__day.is-otherMonth.is-selected .datepicker__daynum
var custom = new Datepicker('#custom', < multiple: true, inline: true, classNames: < node: 'datepicker custom' >, templates: < container: [ '', '', '', '', '', '', ' %>', '' ].join('') > >);
Options
inline: true|false Best used with hidden inputs. Enabling this will render the Datepicker inline with the input and prevent show/hide functionality. multiple: true|false Enables the ability for multiple dates to be selected. Clicking and dragging selects/deselects a range of dates. ranged: true|false Forces the selection to a range of dates. Subsequent clicks and dragging select a new range. time: true|false|»ranged» Enables a single time picker for non-ranged Datepickers when `true`. For ranged Datepickers, or when `time` is `»ranged»`, two time pickers are rendered: «start» and «end». openOn: Date|»first»|»last»|»today» Default place the Datepicker will open to. A specified date, today, or the first/last date within the selected dates. Default `»first»`. min/max: Date|false Minimum and maximum dates available to select from. Default `false`. within: [Date. ]|false If provided, only dates within this array will be allowed. Default `false`. without: [Date. ]|false If provided, dates within this array will be excluded. Default `false`. yearRange: Integer How many years forward & backward from the active year the Datepicker will display in the year dropdown menu. Default `5`. weekStart: Integer Index of the day of the week to start on, `0-6`. `0 == Sunday`, `1 == Monday`, etc. Default `0`. defaultTime: Object|Array Default time when the `time` option is enabled. Given an array of `[hours, minutes]`, will set both the start and end default times. An object consisting of `start` and `end` arrays will set them individually. Default `< start: [0, 0], end: [12, 0] >`. separator: String The separator used when serializing multiple dates. Default `»,»`. serialize: (Date) => String Transforms a date into a string to be set as the value of the input. deserialize: (String) => Date Parses a string into a date. Called whenever a date string is used instead of a date object. toValue: ([Date. ]) => String Transforms the current selected dates to a string used to set the value of the input element. fromValue: (String) => [Date. ] Parses the value of the input into an array of selected dates. onInit: (Element) Called after initialization with the original input element as the only parameter. onChange: (Date|[Date. ]) Called whenever the selected dates change or when the time or time range is updated. The currently selected date(s) are passed; start and end times are set on the respective start and end dates. onRender: (Element) Called whenever the Datepicker is rendered. The element passed is the first child from the resulting templates.
Methods
#.set(prop, value, noRedraw) Set options prop Option key, or object of properties value Value of option (not used if object present) noRedraw Do not redraw the calendar afterwards #.get(key) Get an option key Option key #.update() Update the bound element and trigger onUpdate callback #.open(date) Option the calendar to a specific date (or openOn date) date The date to open to #.show() Add classes to show the datepicker #.hide() Remove classes to hide the datepicker #.next(paginate) Go to the next month paginate How many months to skip #.prev(paginate) Go to the previous month paginate How many months to skip #.goToDate(date) Go to a specific date date Date to set the calendar to #.hasDate(date) Check the value for a specific date date The date to check for #.addDate(date) Add a date to the value date The date to add #.removeDate(date) Remove a date from the value date The date to remove #.toggleValue(date, force) Toggle a date selection date Date to toggle force Force to selected/deselected #.setValue(date) Set the value to a specific date date The date value #.getValue() Get the value of the datepicker #.dateAllowed(date) Check if a date is allowed in the datepicker date The date to check dim The dimension to check (‘year’ or ‘month’) #.draw() Draw the datepicker inner HTML #.render(i) Render a single month’s HTML i Offset month to render #.toString() Basic `toString` method
Copyright © 2016 Wil Wilsman. MIT License.