На этом уроке рассмотрим подключение календаря к полю формы (элементу input).

Работа с датой в HTML5

Возможность работы с датой и временем в HTML5 осуществляется посредством добавления к полю формы атрибута type со значением date. Однако поддержка данной технологии ещё не реализована во всех браузерах.

<form>
  <div class="form-group">
    <label for="inputDate">Введите дату:</label>
    <input type="date" class="form-control">
  </div>
</form>

Виджет "Bootstrap datetimepicker" для работы с датой и временем

Для решения вышеописанной проблемы в интернете существует большое количество различных решений. На этом уроке мы остановимся на виджете "Bootstrap datetimepicker", который предоставляет возможность добавление в поле формы даты и времени с помощью календаря. Данный виджет разрабатывался специально для платформы Twitter Bootstrap 3. Его (виджет) можно скачать по ссылкам, приведённым ниже.

Перейти на страницу проекта Скачать виджет

Для работы виджета "Bootstrap datetimepicker" необходим скрипт "moment-with-locales.min.js", который предназначен для работы с датами. После скачивания необходимых инструментов, их необходимо подключить к Вашей веб-страницы.

<head>
  <!-- ... -->
  <!-- 1. Подключить библиотеку jQuery -->
  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  <!-- 2. Подключить скрипт moment-with-locales.min.js для работы с датами -->
  <script type="text/javascript" src="js/moment-with-locales.min.js"></script>
  <!-- 3. Подключить скрипт платформы Twitter Bootstrap 3 -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- 4. Подключить скрипт виджета "Bootstrap datetimepicker" -->
  <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
  <!-- 5. Подключить CSS платформы Twitter Bootstrap 3 -->  
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <!-- 6. Подключить CSS виджета "Bootstrap datetimepicker" -->  
  <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
</head>

Скачать HTML страницу, к которой подключены платформа "Twitter Bootstrap 3.3.1", скрипт "moment-with-locales.min.js" и виджет "Bootstrap datetimepicker" можно по ссылке, расположенной ниже.

HTML страница, к которой подключен datetimepicker

Основы работы с виджетом "Bootstrap datetimepicker"

Работу с виджетом "datetimepicker" рассмотрим на примерах:

  1. Добавление к полю формы виджета "Bootstrap datetimepicker":
    <!-- Инициализация виджета "Bootstrap datetimepicker" -->
    <div class="form-group">
      <!-- Элемент HTML с id равным datetimepicker1 -->
      <div class="input-group date" id="datetimepicker1">
        <input type="text" class="form-control" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
    
    
    <!-- Инициализация виджета "Bootstrap datetimepicker" -->
    <script type="text/javascript">
      $(function () {
        //Идентификатор элемента HTML (например: #datetimepicker1), для которого необходимо инициализировать виджет "Bootstrap datetimepicker"
        $('#datetimepicker1').datetimepicker();
      });
    </script>
    

    Демонстрация работы виджета:

  2. Установка локалей для виджета "Bootstrap datetimepicker" (осуществляется с помощью параметра language):
    <div class="form-group">
      <div class="input-group date" id="datetimepicker2">
        <input type="text" class="form-control" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
    
    <script type="text/javascript">
      $(function () {
        //Установим для виджета русскую локаль с помощью параметра language и значения ru
        $('#datetimepicker2').datetimepicker(
          {language: 'ru'}
        );
      });
    </script>
    

    Демонстрация работы виджета с русской локалью:

  3. Работа с функциями виджета "Bootstrap datetimepicker":
    <div class="form-group">
      <div class="input-group date" id="datetimepicker3">
        <input type="text" class="form-control" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
    <div class="btn-group">
    <button id="setMinDate" class="btn btn-default" title="Установить минимальную дату">setMinDate</button>
    <button id="setMaxDate" class="btn btn-default" title="Установить максимальную дату">setMaxDate</button>
    <button id="show" class="btn btn-default" title="Показать календарь">Show</button>
    <button id="hide" class="btn btn-default" title="Скрыть календарь">Hide</button>
    <button id="disable" class="btn btn-default" title="Перевести в неактивное состояние поле ввода">Disable</button>
    <button id="enable" class="btn btn-default" title="Перевести в активное состояние поле ввода">Enable</button>
    <button id="setDate" class="btn btn-default" title="Установить заданную дату">setDate</button>
    <button id="getDate" class="btn btn-default" title="Получить дату">getDate</button>
    </div>
    
    <script type="text/javascript">
      $(function () {
        $('#datetimepicker3').datetimepicker({language: 'ru'});
        $("#setMinDate").click(function () {
          $('#datetimepicker3').data("DateTimePicker").setMinDate(new Date("01.01.2015"));
        });                                
        $("#setMaxDate").click(function () {
          $('#datetimepicker3').data("DateTimePicker").setMaxDate(new Date("01.01.2016"));
        });
        $("#show").click(function () {
          $('#datetimepicker3').data("DateTimePicker").show();
        });
        $("#hide").click(function () {
          $('#datetimepicker3').data("DateTimePicker").hide();
        });
        $("#disable").click(function () {
          $('#datetimepicker3').data("DateTimePicker").disable();
        });
        $("#enable").click(function () {
          $('#datetimepicker3').data("DateTimePicker").enable();
        });
        $("#setDate").click(function () {
          $('#datetimepicker3').data("DateTimePicker").setDate("01/09/2015");
        });
        $("#getDate").click(function () {
          alert($('#datetimepicker3').data("DateTimePicker").getDate());
        });
      });
    </script>
    

    Демонстрация функций виджета "Bootstrap datetimepicker":

  4. Отключение времени в виджете "Bootstrap datetimepicker" (осуществляется с помощью параметра pickTime):
    <script type="text/javascript">
      $(function () {
        $('#datetimepicker4').datetimepicker(
          {pickTime: false, language: 'ru'}
        );
      });
    </script>
    

    Демонстрация работы виджета без времени:

  5. Отключение даты в виджете "Bootstrap datetimepicker" (осуществляется с помощью параметра pickDate):
    <script type="text/javascript">
      $(function () {
        $('#datetimepicker5').datetimepicker(
          {pickDate: false, language: 'ru'}
        );
      });
    </script>
    

    Демонстрация работы виджета без даты:

  6. Использование виджета "Bootstrap datetimepicker" без иконки:
    <input type="text" class="form-control" id="datetimepicker6" />
    
    <script type="text/javascript">
      $(function () {
        $('#datetimepicker6').datetimepicker(
          {language: 'ru'}
        );
      });
    </script>
    

    Демонстрация работы виджета без иконки:

  7. Использование виджета с другими элементами в input-group-addon (для этого добавьте класс datepickerbutton к элементу с классом input-group-addon, с помощью которого вы хотите управлять виджетом datetimepicker):
    <div class="input-group date" id="datetimepicker7">
      <span class="input-group-addon datepickerbutton">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
      <input type="text" class="form-control"/>
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-remove"></span>
      </span>
    </div>
    

    Демонстрация использование виджета с другими элементами, расположенными в input-group-addon:

  8. Использование виджетов "Bootstrap datetimepicker" для выбора периода:
    <div class="row">
    <div class="col-xs-6">
    <div class="form-group">
      <div class="input-group date" id="datetimepicker8">
        <input type="text" class="form-control" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
    </div>
    <div class="col-xs-6">
    <div class="form-group">
      <div class="input-group date" id="datetimepicker9">
        <input type="text" class="form-control" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
    </div>
    </div>
    
    <script type="text/javascript">
      $(function () {
        //Инициализация datetimepicker8 и datetimepicker9
        $("#datetimepicker8").datetimepicker();
        $("#datetimepicker9").datetimepicker();
        //При изменении даты в 8 datetimepicker, она устанавливается как минимальная для 9 datetimepicker
        $("#datetimepicker8").on("dp.change",function (e) {
          $("#datetimepicker9").data("DateTimePicker").setMinDate(e.date);
        });
        //При изменении даты в 9 datetimepicker, она устанавливается как максимальная для 8 datetimepicker
        $("#datetimepicker9").on("dp.change",function (e) {
          $("#datetimepicker8").data("DateTimePicker").setMaxDate(e.date);
        });
      });
    </script>
    

    Демонстрация использование виджетов datetimepicker для выбора периода (с помощью использования функций setMinDate и setMaxDate, и события dp.Change):

Кроме параметров, рассмотренных в вышеприведённых примерах, у данного виджета есть и другие параметры, которые рассмотреть в рамках одного урока просто не возможно.

Представим основные параметры в виде таблицы:

Параметр Описание
pickDate Значение по умолчанию: true. Включает или выключает использование в виджете даты.
pickTime Значение по умолчанию: true. Включает или выключает использование в виджете времени.
useMinutes Значение по умолчанию: true. Включает или выключает использование минут.
useSeconds Значение по умолчанию: true. Включает или выключает использование секунд.
minuteStepping Значение по умолчанию: 1. Устанавливает шаг для ввода минут с помощью стрелок вверх и вниз.
minDate Значение по умолчанию: "1/1/1900". Устанавливает минимальную дату для виджета, т.е. дату выбрать меньше которой будет нельзя.
maxDate Устанавливает максимальную дату для виджета, т.е. дату выбрать больше которой не получится.
showToday Значение по умолчанию: true. Показывает индикатор текущей даты в виджете.
language Значение по умолчанию: 'en'. Устанавливает языковую локаль.
defaultDate Значение по умолчанию: "". Устанавливает значение даты по умолчанию, которая будет выводиться в поле формы.
disabledDates Значение по умолчанию: []. Устанавливает массив дат, значения которых не могут быть выбраны. Например: [new Date(2015,11-1,10),"01/11/2015"]
enabledDates Значение по умолчанию: []. Устанавливает массив дат, значения которых могут быть выбраны.
icons Значение по умолчанию:
= {
    time: 'glyphicon glyphicon-time',
    date: 'glyphicon glyphicon-calendar',
    up:   'glyphicon glyphicon-chevron-up',
    down: 'glyphicon glyphicon-chevron-down'
  }
Устанавливает иконки, которые при необходимости можно изменить на другие.
sideBySide Значение по умолчанию: false. Данный параметр включает или отключает отображения панели рядом с календарём для установки времени.
daysOfWeekDisabled Значение по умолчанию: []. Данный параметр предназначен для запрещения выбора определённых дней недели (0 – Воскресенье, 1 – Понедельник, 2 - Вторник, 3 –Среда, 4 – Четверг, 5 – Пятница, 6 – Суббота). Например, чтобы запретить в календаре выбирать выходные дни, необходимо использовать следующую запись: daysOfWeekDisabled: [0,6].

События виджета "Bootstrap datetimepicker"

Кроме параметров и функций виджет "Bootstrap datetimepicker" имеет 4 события:

  • Событие dp.change. Данное событие срабатывает, когда datepicker изменяет или обновляет свою дату.
  • Событие dp.show. Данное событие срабатывает при открытии календаря пользователю.
  • Событие dp.hide. Данное событие срабатывает, когда календарь полностью скрывается от пользователя.
  • Событие dp.error. Оно срабатывает, когда скрипт moment.js не может обработать дату или когда виджет datetimepicker не может изменить своё состояние.