JavaScript UI контролы Calendar и Time Selection

Calendar - это JavaScript контрол, который можно легко добавить в веб-приложение или веб-страницу.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

Этот виджет возволяет пользователям выбирать дни, месяцы, годы и точное время. Вы можете выбрать один из двух режимов просмотра - год или месяц, вы также можете использовать Timepicker для выбора времени. Вы можете блокировать конкретные даты и интервалы. Calendar - это легко настраиваемый контрол, к которому вы можете добавлять кнопки.

Режимы "месяц" и "год"

Вы можете отображать месяцы или годы в Calendar.

Выберите месяц или год

Заблокированные даты

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

Дополнительные иконки

У Webix Calendar есть удобные кнопки 'Today' и 'Clear'. Благодаря им пользователи могут выбирать текущую дату или снимать выделение.

Нажмите на 'Today', чтобы показать текущую дату

Переводите Calendar

В Webix Calendar можно легко перевести на любой язык названия месяцев и дней. Кроме того, этот JavaScript виджет может отображать номер недели. Его можно легко подстроить к местным правилам отсчета начала недели.

Нажмите на 'fr-FR', чтобы перевести календарь на французский

Datepicker

Когда вы работаете с формой, вручную вводить даты в поле может быть достаточно неудобно. Главная цель виджета Datepicker - упростить эту задачу. Благодаря ему, вы можете легко выбирать год, месяц и день. Нажав на поле формы, вы увидите всплывающее окно с календарем. По умолчанию, календарь показывает текущую дату.

Выберите даты в разных форматах

Timepicker

Webix также позволяет выбирать время двумя способами. Первый способ - выбор времени с помощью встроенного виджета Timepicker, который отображается в виде иконки с часами под календарем в DatePicker. Второй способ - с помощью отдельного контрола для выбора времени.

Выберите другое время

Date Range и Date Range Picker

С помощью контролов DateRange и DateRangePicker, вы можете выбирать диапазоны дат и даты из нескольких календарей, как на сайтах для бронирования.

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