Javascript ввод даты календарь

Примеры

На этой странице собраны небольшие примеры того, как работает и на что способен Air Datepicker.

Базовые примеры

С опциями по умолчанию

Статичный календарь

Для того, чтобы календарь был постоянно видимый, нужно его проинициализировать не на текстовом поле, или передать параметр

new AirDatepicker('#div'); // Or init with on or elements new AirDatepicker('#input', < inline: true >) 

Выбор даты при инициализации

Для выбора даты используйте опцию selectedDates . На принимает массив дат, строк или чисел. Подробнее можно ознакомится в разделе документации. Давайте выберем сегодняшнюю дату.

Выбор месяца

Для возможности выбора только месяца без конкретного числа, можно использовать комбинацию из опций view и minView — с помощью первой мы устанавливаем текущее представление календаря, а с помощью второй задаем минимально возможное представление.

Режим для мобильных устройств

У Air Datepicker есть режим, который позволяет открывать календарь как модальное окно — в этом режиме он появляется по центру экрана в немного увеличенных размерах для облегчения выбора даты.

Позиционирование

Позиция календаря задается с помощью параметра position — он может быть как строкой так и функцией.

Простое позиционирование

Базовое позиционирование задается через строку — «‘основная ось ‘второстепенная ось'» . Например, покажем календарь справа от текстового поля:

Использование Popper.js

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

В следующем примере обработаем позицию с помощью библиотеки Popper.js. Попробуйте проскролить страницу дальше.

import AirDatepicker from 'air-datepicker'; import from '@popperjs/core'; new AirDatepicker('#el', < container: '#scroll-container', visible: true, position() < let popper = createPopper($target, $datepicker, < placement: 'top', modifiers: [ < name: 'flip', options: < padding: < top: 64 >> >, < name: 'offset', options: < offset: [0, 20] >>, < name: 'arrow', options: < element: $pointer >> ] >) /* Возвращаем функцию, которая вызывается при срабатывании `hide()`, она обязательно должна вызвать функцию `done()` для завершения процесса скрытия календаря */ return function completeHide() < popper.destroy(); done(); >> >) 

При использовании Popper.js, Air Datepicker автоматически повернет указатель в нужном направлении! 😎

Создание анимации появления и скрытия

Air Datepicker позволяет добавить свои анимации появления и скрытия. Вы также можете сделать это своими руками или же использовать любую библиотеку для анимаций.

Для следующего примера возьмем библиотеку anime.js и объединим ее с Popper.js

import AirDatepicker from 'air-datepicker'; import from '@popperjs/core'; import anime from 'animejs'; new AirDatepicker('#el', < position() < let popper = createPopper($target, $datepicker, < placement: 'bottom', onFirstUpdate: state =>< !isViewChange && anime.remove($datepicker); $datepicker.style.transformOrigin = 'center top'; !isViewChange && anime(< targets: $datepicker, opacity: [0, 1], rotateX: [-90, 0], easing: 'spring(1.3, 80, 5, 0)', >) >, modifiers: [ < name: 'offset', options: < offset: [0, 10] >>, < name: 'arrow', options: < element: $pointer, >>, < name: 'computeStyles', options: < gpuAcceleration: false, >, >, ] >); return () => < anime(< targets: $datepicker, opacity: 0, rotateX: -90, duration: 300, easing: 'easeOutCubic' >).finished.then(() => < popper.destroy(); done(); >) > >> ) 

Диапазон дат

Для того, чтобы выбрать диапазон дат, передайте параметр . После выбора обеих дат, можно скорректировать выбор просто перетаскивая активные даты.

Минимальная и максимальные даты

Для манипуляции с минимально возможной и максимально возможной датой используйте опции minDate и maxDate . В сочетании с функцией update() можно реализовать выбор дат только в ограниченном диапазоне.

let dpMin, dpMax; dpMin = new AirDatepicker('#el1', < onSelect() < dpMax.update(< minDate: date >) > >) dpMax = new AirDatepicker('#el2', < onSelect() < dpMin.update(< maxDate: date >) > >) 

Выбор времени

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

Формат времени

Формат времени задается в объекте локализации или в опции . Для отображения времени в 12-ти часовом варианте, используйте символы ‘h’ или ‘hh’ . Чтобы отобразить период дня добавьте ‘aa’ или ‘AA’ .

Настройка часов и минут

Время регулируется несколькими опциями, это minHours, maxHours, minMinutes, maxMinutes . Также можно настраивать шаг шкалы выбора времени с помощью hoursStep, minutesStep .

Давайте попробуем ограничивать выбор часов с 8 до 19 и добавить шаг выбора минут в значение 5.

Содержимое ячеек

Air Datepicker позволяет изменять содержимое ячеек как угодно. Содержание, классы и статус (активный/не доступный для выбора) регулируются с помощью опции ) => <>)> .

В следующем примере заменим содержимое ячеек из списка дат на произвольную эмоджи, плюс поменяем активный цвет фона таких ячеек

let today = new Date(); new AirDatepicker('#inline-div', < // Handle render process onRenderCell() < let dates = [1, 5, 7, 10, 15, 20, 25], emoji = ['💕', '😃', '🍙', '🍣', '🍻', '🎉', '🥁'], isDay = cellType === 'day', _date = date.getDate(), shouldChangeContent = isDay && dates.includes(_date), randomEmoji = emoji[Math.floor(Math.random() * emoji.length)]; return < html: shouldChangeContent ? randomEmoji : undefined, classes: shouldChangeContent ? '-emoji-cell-' : undefined, attrs: < title: shouldChangeContent ? randomEmoji : '' >> >, // Select 10th day of the month selectedDates: new Date(today.getFullYear(), today.getMonth(), 10) >); 

Изменение заголовков

В Air Datepicker есть возможность изменять подписи в навигации календаря. Можно использовать как статические варианты, так и динамические — передав функцию в соответствующую опцию. Вы можете использовать как html тэги, так и специальные токены для форматирования их в дату.

Статичный заголовок

Динамический заголовок

new AirDatepicker('#el', < navTitles: < days(dp) < if (dp.selectedDates.length) < let date = dp.selectedDates[0]; return `Вы выбрали $ `; > return 'Выберите дату'; > > >)

Добавление кнопок

Для удобства выбора конкретной даты, или для очистки выбранных данных можно добавить кнопки в тело календаря. Вы можете добавить одну из предустановленных кнопок или же создать свою. Подробнее можно почитать в в разделе документации.

Предустановленные кнопки

Для добавления кнопок воспользуйтесь опцией buttons — она принимает массив строк или массив объектов с описанием кнопки.

Создание своих кнопок

Для создания своих кнопок нужно передать структуру, описывающую контент кнопки и ее поведение. Давайте создадим кнопку, которая включает и выключает модуль выбора времени:

new AirDatepicker('#el', < buttons: [ < content(dp) < return dp.opts.timepicker ? 'Выключить выбор времени' : 'Включить выбор времени' >, onClick(dp) < let viewDate = dp.viewDate; let today = new Date(); // Since timepicker takes initial time from 'viewDate', set up time here, // otherwise time will be equal to 00:00 if user navigated through datepicker viewDate.setHours(today.getHours()); viewDate.setMinutes(today.getMinutes()); dp.update(< timepicker: !dp.opts.timepicker, viewDate >) > > ] >)

Источник

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.

Источник