В этой статье рассмотрим компонент DateTimePicker для Bootstrap 3, с помощью которого можно очень просто добавить к полю input календарь.

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

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

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

Обзор компонента Bootstrap 3 DateTimePicker

Bootstrap 3 DateTimePicker - это библиотека для Bootstrap 3, с помощью которой можно добавить в input календарь.

Для работы компонента Bootstrap 3 DateTimePicker необходим фреймворк Bootstrap 3 и библиотека Moment.js.

Подключение компонента Bootstrap 3 DateTimePicker к странице:

<!-- 1. Подключить CSS-файл Bootstrap 3 -->  
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<!-- 2. Подключить CSS-файл библиотеки Bootstrap 3 DateTimePicker -->  
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />

<!-- 3. Подключить библиотеку jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 4. Подключить библиотеку moment -->
<script src="js/moment-with-locales.min.js"></script>
<!-- 5. Подключить js-файл фреймворка Bootstrap 3 -->
<script src="js/bootstrap.min.js"></script>
<!-- 6. Подключить js-файл библиотеки Bootstrap 3 DateTimePicker -->
<script src="js/bootstrap-datetimepicker.min.js"></script>

Скачать HTML страницу, к которой подключена библиотека Bootstrap DateTimePicker можно по следующей ссылке:

Скачать пример

Примеры работы с Bootstrap 3 DateTimePicker

Добавление к полю формы input виджета Bootstrap DateTimePicker:

<div class="form-group">
  <!-- элемент input с id = datetimepicker1 -->
  <div class="input-group" 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>
  $(function () {
    // идентификатор элемента (например: #datetimepicker1), для которого необходимо инициализировать виджет Bootstrap DateTimePicker
    $('#datetimepicker1').datetimepicker();
  });
</script>
Bootstrap 3 - Установка даты в input с помощью календаря

Установка русской локали для Bootstrap DateTimePicker (осуществляется с помощью параметра locale):

<div class="form-group">
    <div class="input-group" id="datetimepicker2">
        <input type="text" class="form-control"/>
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-calendar"></i>
            </span>
        </div>
    </div>  
</div>    

<!-- Инициализация Bootstrap DateTimePicker -->
<script>
    $(function () {
        $('#datetimepicker2').datetimepicker({
            locale: 'ru'
        });
    });
</script>
Bootstrap 3 - Установка русской локали для компонента DateTimePicker

Основы работы с функциями Bootstrap DateTimePicker:

<div class="form-group">
    <div class="input-group date" id="datetimepicker3">
        <input type="text" class="form-control"/>
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
    </div>
</div>
<div class="btn-group" style="margin-bottom: 5px;">
    <button id="setMinDate" class="btn btn-default" title="Установить минимальную дату">minDate("05.11.2017")
    </button>
    <button id="setMaxDate" class="btn btn-default" title="Установить максимальную дату">maxDate("25.11.2017")
    </button>
</div>
<div class="btn-group" style="margin-bottom: 5px;">
    <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>
</div>
<div class="btn-group" style="margin-bottom: 5px;">
    <button id="setDate" class="btn btn-default" title="Установить заданную дату">date("15.11.2017")</button>
    <button id="getDate" class="btn btn-default" title="Получить дату">date()</button>
</div>

<script>
$(function () {
  $('#datetimepicker3').datetimepicker({locale: 'ru'});
  $("#setMinDate").click(function () {
    $('#datetimepicker3').data("DateTimePicker").minDate(moment('05.11.2017','DD.MM.YYYY'));
  });
  $("#setMaxDate").click(function () {
    $('#datetimepicker3').data("DateTimePicker").maxDate(moment('25.11.2017','DD.MM.YYYY'));
    $('#datetimepicker3').data("DateTimePicker").date(null);
  });
  $("#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").date(moment('15.11.2017','DD.MM.YYYY'));
  });
  $("#getDate").click(function () {
    alert($('#datetimepicker3').data("DateTimePicker").date());
  });
});
</script>
Работа с функциями Bootstrap 3 DateTimePicker

Отображение в виджете Bootstrap DateTimePicker только времени (осуществляется с помощью параметра pickTime):

<script>
    $(function () {
        $('#datetimepicker4').datetimepicker(
            {format: 'HH:mm', locale: 'ru'}
        );
    });
</script>
Использование Bootstrap 3 DateTimePicker для ввода времени

Вызов виджета Bootstrap DateTimePicker без иконки:

<input type="text" class="form-control" id="datetimepicker5" />

<script type="text/javascript">
    $(function () {
        $('#datetimepicker5').datetimepicker(
            {locale: 'ru'}
        );
    });
</script>

Добавление к input с Bootstrap DateTimePicker дополнительной иконки:

<div class="input-group date" id="datetimepicker6">
    <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>

<script">
    $(function () {
        $('#datetimepicker6').datetimepicker();
        $('.glyphicon-remove').click(function () {
            $('#datetimepicker6').data("DateTimePicker").clear();
        });
    });
</script>
Добавление дополнительной иконки в input с Bootstrap 3 DateTimePicker

Использование Bootstrap DateTimePicker для установки периода:

<div class="row">
    <div class="col-xs-6">
        <div class="form-group">
            <div class="input-group date" id="datetimepicker7">
                <input type="text" class="form-control"/>
                <span class="input-group-addon">
                    <i class="glyphicon glyphicon-calendar"></i>
                </span>
            </div>
        </div>
    </div>
    <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">
                    <i class="glyphicon glyphicon-calendar"></i>
                </span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        // инициализация datetimepicker7 и datetimepicker8
        $("#datetimepicker7").datetimepicker();
        $("#datetimepicker8").datetimepicker({
            useCurrent: false
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker8').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker8").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>
Использование Bootstrap 3 DateTimePicker для установки периода

Основные параметры Bootstrap DateTimePicker

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

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

Параметр Описание
format Значение по умолчанию: false. Определяет вид виджета. Например, при установки формата DD.MM.YYYY в виджете не будет отображаться время.
stepping Значение по умолчанию: 1. Определяет шаг при изменении минут в виджете с помощью стрелок вверх и вниз.
minDate Значение по умолчанию: false. Устанавливает минимальную дату, которую можно выбрать в виджете DateTimePicker.
maxDate Значение по умолчанию: false. Устанавливает максимальную дату, выбрать больше которой в виджете будет нельзя.
locale Значение по умолчанию: moment.locale(). Задаёт нужную языковую локаль.
defaultDate Значение по умолчанию: false. Устанавливает значение даты, которая будет выводиться в поле формы по умолчанию.
disabledDates Значение по умолчанию: false. Позволяет задать даты, которые будут не доступны для выбора (указываются посредством массива).
icons Позволяет изменить стандартные иконки Bootstrap DateTimePicker на другие.
sideBySide Значение по умолчанию: false. Позволяет включить одновременное отображение в виджете календаря и панели для установки времени.
daysOfWeekDisabled Значение по умолчанию: []. Данный параметр предназначен для запрещения выбора определённых дней недели в календаре (0 – Воскресенье, 1 – Понедельник, 2 - Вторник, 3 – Среда, 4 – Четверг, 5 – Пятница, 6 – Суббота). Например, для того чтобы запретить в календаре выбор выходных дней, необходимо установить следующее значение: daysOfWeekDisabled: [0,6].

События компонента Bootstrap DateTimePicker

Кроме параметров и функций виджет Bootstrap DateTimePicker имеет следующие события:

  • dp.change (возникает при изменении даты);
  • dp.show (возникает при открытии виджета);
  • dp.hide (происходит при скрытии виджета);
  • dp.error (генерируется, если установленная дата не проходит валидацию);
  • dp.update (генерируется при различных изменениях в виджете; в том числе при нажатии на кнопку "Next" и "Previous", переключения в режим выбора года и др.).