Bootstrap 3 - DateTimePicker

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

Возможность работы с датой и временем в HTML 5 осуществляется путем добавления в поле формы атрибута type со значением date. Однако поддержка данной технологии в разных браузерах оставляет желать лучшего. Так, например в Internet Explorer данная технология вообще не реализована, даже в самой последней версии (11) на текущий момент времени.

Пример:

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

Для решения вышеописанной проблемы в интернете существует большое количество различных решений. На этом уроке мы остановимся на виджете "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

Работу с виджетом "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" имеет 4 события:

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


   Bootstrap 0    43137 +1

Комментарии (96)

  1. Anna # 0
    Александр, а Вы планируете уроки по modx revo&
    1. Александр Мальцев # 0
      Желание написать уроки по MODX Revo есть, но останавливает только объёмность. Не знаешь с чего начать…
      Уроки в каком направлении Вам бы хотелось увидеть? В виде пошаговых инструкций или в каком-нибудь другом плане?

      А так как материал объёмный, рассмотреть всё систему просто не возможно. Тут тоже надо определиться, в каком направлении писать:
      1. Подробное рассмотрение самой CMS
      2. Краткое рассмотрение самой CMS и дополнений к ней
      3. Пошаговые инструкции по созданию сайта на CMS, т.е. связанные между собой уроки от установки до получения готового сайта.
      1. Anna # 0
        Хотелось бы пошаговое создание сайта (простого) с 2-3 страницами. Например, у главной страницы один шаблон, у других стр, другой шаблон,. Потом как они между собой соединяются, т.е. переход из меню с главной (со своим шаблоном)на второстепенную с др шаблоном (потому что этого я не нашла и на этом закончила изучение modx. И шаблон можно обычный — простой, без слайдеров например, т.е. header, sidbar, footer, content. Ну и включая возможность комментирования. Спасибо.
        1. Александр Мальцев # 0
          Уроки по MODX начну писать со следующей недели. В планах не просто рассмотреть несколько страниц и переходы между ними, а именно создание полнофункционального сайта.
        2. Витя # 0
          Желание написать уроки по MODX Revo есть, но останавливает только объёмность.
          — напоминает извращенцев которые в век мобильной связи юзают почтовых голубей да еще и со сломанным крылом. Более убогово убожества чем MODX найти очень сложно!
          1. Александр Мальцев # 0
            Витя, прежде чем что-то высказывать лучше бы поделились своим опытом. Сколько Вы лет в разработке, и сколько Вы сайтов создали по MODX и на других CMS. С какими проблемами Вы сталкивались при разработке и сопровождению сайтов. Как ведут себя сайты (CMS) под большими нагрузками и многое другое. Да хотя бы указали, какие конкретные плюсы и минусы, чтоб понятно было, а не просто непонятные утверждения.
      2. Максим # 0
        Добрый день!
        Столкнулся с такой ситуацией…
        имею такой код
        $('fieldset input.form-control,select,textarea').change(setChangeFlag);
        
        все работает. кроме пролей даты, к которым подключен этот datetimepicker.
        порылся в его свойствах, но вроде не нашел что-то типа:
        $(".date").datepicker({
          onSelect: function() {
            $(this).change();
          }
        });
        как у datepicker.
        может плохо искал? или придется самому дописывать?

        PS

        Покапавшись в коде пикера, увидел что он таки вызывает событие, но не у самого input, а у основного div, пока вышел из положения так:
        $('fieldset input.form-control,select,textarea,.input-group.date').change(riseChangeFlag);
        но мне кажется это не правильно… почему то… :-)
        1. Александр Мальцев # 0
          Добрый день, Максим! На этот вопрос нет однозначного ответа, тут придётся что-то придумывать. Так как Вы уже нашли один из вариантов ответа на свой вопрос, то могу для сравнения предложить другой вариант, только не знаю, подойдёт он Вам или нет.

          Он будет заключаться в изменении значения атрибута text=«date» на text=«type».
          $('input[type="date"]').prop('type','text');
          

        2. warwar # 0
          Добавляем выбор даты в блок, не в основном контексте position:absolute и получаем ошибку: «uncaught typeerror: cannot read property 'top' of undefined»

          Кто сталкивался с такой проблемой, и как ее решать?
          1. Александр Мальцев # 0
            Добрый день!
            Приведите Ваш код на jsfiddle.net/.
            Так как сложно судить только по тексту ошибки.
            P.S. Добавление поля с выбором даты в div с position:absolute у меня ошибок не вызвало.
          2. Алексей # 0
            Добрый день.
            Подскажите как сделать что бы текущая дата, сразу отображалась, в input?
            1. Александр Мальцев # 0
              Добрый день.
              Установить значение defaultDate.
              Например, так:
              $('#datetimepicker1').datetimepicker({language: 'ru',defaultDate: new Date});
              
            2. Алексей # 0
              но тогда нельзя применить формат
              мне надо что бы было так:$('#datetimepicker1').datetimepicker({language: 'ru', defaultDate: «21/05/2015», viewMode: 'years', format: «MMMM YYYY»}); май 2015, но так не работает
              1. Александр Мальцев # 0
                Формат применяется в любом случае. Просто в твоём примере JavaScript не может произвести разбор строки «21/05/2015», т.е. преобразовать строку в дату. Строка, содержащая дату должна быть в формате ISO-8601 или записана таким образом чтобы её мог разобрать Date.parser.
              2. Алексей # 0
                Спасибо за ответ
                и еще вопрос
                мне нужно что бы выбирался только месяц
                я пишу так $('#datetimepicker1').datetimepicker({language: 'ru', viewMode: 'months', format: «MM YYYY»});
                но при выборе месяца открывается календарь на выбор даты и т.д.
                1. Александр Мальцев # 0
                  При выполнении Вашего кода столкнулся с точно такой же проблемой.
                  Из данной ситуации получилось выйти, только обновив все компоненты до последних версий.
                  При желании можете скачать этот архив, в котором собраны последние версии компонентов.
                2. Алексей # 0
                  $('#dt1').datetimepicker({
                  locale: 'ru', defaultDate: '2015-05-25', format: 'D dddd' });

                  в input соответственно «25 вторник»
                  а в экшен надо передать yyyy-mm-dd
                  можно ли как то вытащить полную дату?
                  1. Алексей # 0
                    нашел что полную дату можно получить вот так:
                    $('#dt1').data(«DateTimePicker»).date()._d
                    Wed May 27 2015 00:00:00 GMT+0700 (Северная Центр. Азия (лето))

                    но поскольку 00:00:00 то $('#dt1').data(«DateTimePicker»).date()._d.toISOString()
                    «2015-05-26T17:00:00.000Z» при defaultDate('2015-05-27')

                    если задать defaultDate: '2015-05-27T11:59:33+03:00' то все равно:
                    $('#dt1').data(«DateTimePicker»).date()._d.toISOString()
                    «2015-05-26T17:00:00.000Z»
                    как обойти?
                    1. Александр Мальцев # 0
                      Алексей, у меня данная функция работает правильно. Попробывал в разных браузерах, всё верно.
                      DateTimePicker - метод date
                    2. Finnesko # 0
                      Как в bootstrap-datepicker сделать так чтоб он показывал в всплывающем окошке года с 1900 по 1909?
                      На данный момент он показывает с 2010 по 2019
                      1. Александр Мальцев # 0
                        <input type="text" class="form-control" id="datetimepicker1">
                        
                        <script type="text/javascript">
                        $(function () {
                          $('#datetimepicker1').datetimepicker({language: 'ru', minDate:"1/1/1900", maxDate:"31/12/1909", showToday:"false",defaultDate:"1/1/1900"});
                        });
                        </script>
                        
                        1. Finnesko # 0
                          Не получается(
                          Может это связано с версией, у меня стоит версия 2.0
                          1. Александр Мальцев # 0
                            Скорее всего.
                            Попробуй обновиться на последнюю стабильную версию 4.15.35.
                            1. Finnesko # 0
                              Спасибо помогло!) После обновления до версии 4.15.35 все заработало. Только появился новый вопрос: Как сперва показывать пользователю года ( выбор года )? В версии 2.0 это осуществлялось так: startView: 2
                              $('#date_of_birth').datepicker({startView: 2 });
                              1. Александр Мальцев # 0
                                viewMode: 'years'
                        2. Ольга # 0
                          Подключаю плагин. хочу русифицировать. Браузер ругается на параметры. не найдены. Компонент взяла отсюда
                          При желании можете скачать этот архив, в котором собраны последние версии компонентов.
                          <script type="text/javascript">
                          	$(document).ready(function(){
                          		$('#date1, #date2').datetimepicker({pickDate: false, language: 'ru'});
                          		
                          	});
                          </script>
                          Выдает вот такую ошибку
                          option pickDate is not recognized!
                          Еще хочу чтобы сразу после выбора календарь пропадал. делаю так
                          $("#date1", '#date2').change(function(){
                          			$(this).data("DateTimePicker").hide();
                          		});
                          но он не скрывается. может не то событие?
                          1. Александр Мальцев # 0
                            Ольга, функционал последних версий этого компонента был значительно переработан. Название параметров и методов были изменены. Поэтому примеры, представленные в статье будут работать только с версией, ссылка на которую представлена в самой статье.
                            В новой версии Ваш код необходимо переписать так:
                            $(document).ready(function(){
                                $('#date1, #date2').datetimepicker({
                                  format: 'L',
                                  locale: 'ru'
                                });
                              });
                            
                            В ближайшее время переработаю текст статьи под новую версию компонента Datetimepicker.
                            1. Ольга # 0
                              Понятно. спасибо за отзыв. пока вы не доработали статью, можно ссылку на новый функционал виджета? Хотелось бы знать как он теперь работает.
                              1. Александр Мальцев # 0
                          2. Дарья # 0
                            Скажите, пожалуйста, на данный момент в IE работает виджет даты? Если да, то в каком формате дата отображается: дд.мм.гггг или mm/dd/yyyy?
                            1. Александр Мальцев # 0
                              Виджет Bootstrap 3 Datepicker работает в IE.
                              Формат даты зависит от локали. В ru — дд.мм.гггг. В en — mm/dd/yyyy.
                            2. Maksim # 0
                              Добрый день, Александр.
                              Спасибо за описание виджета. Попробовал использовать такой код:
                                                      <div class="input-daterange input-group" id="datepicker">
                                                          <span class="input-group-addon">с</span>
                                                          <input type="text" id="startdate" class="input form-control" name="start">
                                                          <span class="input-group-addon">по</span>
                                                          <input type="text" id="enddate" class="input form-control" name="end">
                                                      </div>
                              
                                                     <script>
                                                         $('#datepicker.input-daterange').datepicker({
                                                         format: "MM yyyy",
                                                         startView: 1,
                                                         minViewMode: 1,
                                                         clearBtn: true,
                                                         language: "ru",
                                                         orientation: "bottom auto",
                                                         multidate: false,
                                                         multidateSeparator: false,
                                                         autoclose: true,
                                                         toggleActive: true
                                                    });
                                                   </script>
                              
                              Виджет работает как и задумывалось. Отображаются только месяцы, есть выбор года. Есть второе окно, чтобы можно было выбрать диапазон. При выборе в первом окне, автоматически выбирается та же дата, что в первом. А во втором всегда можно выбрать другую. Теперь возник вопрос, как при изменении даты передать эти данные AJAX POST запросом. Как передавать – понимание есть.
                              Написал отдельные скрипты
                                                <script>
                                                  $('#startdate').on('changeDate', function(){
                                                   });    
                                                </script>
                                               <script>
                                                $('#enddate').on('changeDate', function(){
                                                });    
                                              </script>
                              
                              События срабатывают. А вот что передать – никак не разберусь. Не могу понять, как присвоить каким-то переменным выбранные даты?
                              Как объединить событие on.changedate сразу на оба элемента #startdate и #enddate, когда выбирается диапозон? И как сделать, чтобы при загрузке страницы и при нажатие очиститить, по событию clearDate месяц (дата) всегда выбирался текущий? Default month не работает.
                              1. Maksim # 0
                                Добрый день.
                                разобрался как присвоить переменные, дополнил скрипт следующими строками:
                                       .on('changeDate', function(){
                                        var startdate = $('#startdate').val();
                                        var enddate = $('#enddate').val();
                                            
                                            alert(startdate +  enddate);
                                        
                                }); 
                                
                                1. Дмитрий # 0
                                  Добрый день!
                                  А почему не один из приведённых здесь примеров не работает?
                                  Тема ещё актуальна?
                                  1. Александр Мальцев # 0
                                    Добрый день!
                                    Проверьте, всё должно работать.
                                    1. Дмитрий # 0
                                      Насколько я понимаю при нажатии на это поле должен появится календарик и в нем можно выбрать дату, верно?
                                      1. Александр Мальцев # 0
                                        Да, верно.
                                        1. Дмитрий # 0
                                          Пардон, да действительно всё работает.
                                          Подскажите, а как вывести только время без даты?
                                          1. Александр Мальцев # 0
                                            Это рассказано в 5 пункте раздела «Основы работы с виджетом Bootstrap datetimepicker».
                                            1. Дмитрий # 0
                                              Спасибо, разобрался.
                                  2. Александр # 0
                                    Здравствуйте.
                                    А как автоматически отправлять форму серверу при изменении значения даты.
                                    <form>
                                      <div class="form-group">
                                        <div class="input-group date" id="datetimepicker1">
                                          <input type="text" class="form-control" name="dts" onchange="form.submit()"/>
                                          <span class="input-group-addon">
                                            <span class="glyphicon-calendar glyphicon"></span>
                                          </span>
                                        </div>
                                      </div>
                                      </form>
                                    <script type="text/javascript">
                                        $(function () {
                                          $('#datetimepicker1').datetimepicker({language: 'ru',pickTime:false,minuteStepping:10,defaultDate:"09.01.2015",daysOfWeekDisabled:[0,6]});
                                          $('#datetimepicker2').datetimepicker({language: 'ru'});
                                        });
                                      </script>
                                    
                                    Отправляет после изменения даты и нажатия Enter
                                    1. Александр Мальцев # 0
                                      Здравствуйте.
                                      Событие change происходит только после потери фокуса элементом и не отслеживает каждый введённый Вами символ.
                                      Компонент datetimepicker имеет специальное событие change.dp (происходит, когда дата изменена):
                                      $("#datetimepicker1").datetimepicker().on('change.dp', function (e) {
                                        $("#myform").submit();
                                      });
                                      
                                      Но оно тоже происходит после потери фокуса.

                                      Если Вам необходимо отслеживать каждый введённый символ в поле и проверять значение даты, то используйте событие keypress:
                                      $( 'input[name="dts"]').keypress(function() {
                                        //тут необходимо написать проверку поля и в случае успеха отправлять его на сервер
                                      });
                                      
                                      1. Александр # 0
                                        1. Спасибо.
                                        2. Вы правильно заметили про отслеживание символов. Суть в том, что все проверки полей проводятся на сервере (пытаемся облагородить древнюю систему, еще на АСП и VBS написанную), в связи с этим вопрос, чтобы не писать скрипт проверки каждого символа в поле, возможно ли запретить ввод в поле с клавиатуры, оставив только возможность выбора «мышкой в календарике», и если да, то как?
                                        1. Александр Мальцев # 0
                                          Добавить элементу input атрибут:
                                          readonly="readonly"
                                          
                                          1. Александр # 0
                                            Благодарю.
                                    2. Ololosha # 0
                                      Подскажите, пожалуйста, возможно ли прикрутить к обычному div без input'а. И как то, отслеживать события?
                                      1. Mirehiko # 0
                                        Здравствуйте, ваш способ подачи информации намного понятнее нежели на оф сайте и это радует. Спасибо вам все работает)
                                        Есть одна проблема мне нужно задать время, которое будет равно текущему плюс час, но не менее. Какие параметры нужно указать при этом? Получилось задать только не меньше текущего.
                                        1. Александр Мальцев # 0
                                          Здравствуйте.
                                          Необходимо использовать параметр minDate:
                                          $(function () {
                                            var minDate = new Date();
                                            minHours = minDate.getHours()+1;
                                            //текущее время + 1 час
                                            minDate.setHours(minHours);
                                            $('#datetimepicker1').datetimepicker({
                                              locale: 'ru',
                                              minDate: minDate, 
                                              defaultDate: minDate
                                            });
                                          });
                                          
                                        2. Антон # 0
                                          Подскажите, как можно сделать чтобы при выборе времени, при клике на «час» происходил не переход к окошку со списком часов от 00 до 23, а сразу подстановка текущего «часа в поле времени». Ну и с минутами соответственно тоже. Спасибо.
                                          1. Александр Мальцев # 0
                                            Не совсем понял вопроса. Ну подставляйте сразу текущее время и дату:
                                             $(function () {
                                                $('#datetimepicker1').datetimepicker({
                                                  locale: 'ru',
                                                  defaultDate: new Date,
                                                });
                                            });
                                            
                                          2. wiNs # 0
                                            Доброго времени суток!
                                            Очень доволен Вашим ресурсом.
                                            У меня к Вам вопрос, касающийся установки текущей даты в качестве начала отсчета. Например, сегодня 28.04.2016, мне необходимо, что бы календарь не давал выбирать более раннюю дату, отличную от сегодняшней (28.04.2016), а все остальные, начиная с этой даты — пожалуйста, выбирайте :-)
                                            Заранее благодарю Вас за ответ.
                                            1. wiNs # 0
                                              Видно рано поблагодарил xD
                                              1. Александр Мальцев # 0
                                                Здравствуйте, извините что долго не отвечал.
                                                За это отвечает параметр minDate.
                                                Устанавливается он следующим образом:
                                                $(function () {
                                                  $('#datetimepicker1').datetimepicker({
                                                    locale: 'ru',
                                                    minDate: moment()
                                                  });
                                                });
                                                
                                                1. wiNs # 0
                                                  На счет долгого ответа — Вы все же не обязаны подпрыгивать и сразу писать ответы всем жаждущим внимания) Я Вам очень признателен, что Вы хоть ответили))
                                                  Я прочитал про параметр minDate, ещё вчера, пробовал всякие вариации, но вот функцию moment (), не нашёл в Вашем описании :-) Было бы весьма полезно, если бы Вы чуточку расширили Ваше описание и добавили туда данный вопрос.

                                                  Спасибо Вам за скорый ответ) Все попробовал — работает ;-)

                                                  P.S. Уважаю качественный труд, а Ваш труд — качественный.
                                                  1. Александр Мальцев # 0
                                                    Напишу, но позже.
                                                    moment.js — это библиотека для работы с датой в JavaScript. Она предоставляет готовые функции, которые позволяют осуществить разбор даты, а также её проверку, изменение и отображение.
                                                    Представленный пример можно записать и так:
                                                    $(function () {
                                                      $('#datetimepicker1').datetimepicker({
                                                        locale: 'ru',
                                                        minDate: new Date()
                                                      });
                                                    });
                                                    
                                              2. OdIUm # 0
                                                Добрый день, Александр.
                                                Хочу использовать datetimepicker в качестве инструмента для установки и редактирования даты рождения пользователя.

                                                Поле отображается, календарь работает, данные уходят. Проблема в отображении.
                                                Как при загрузке страницы получать данные из бд и отображать их в календаре? Пытаюсь передать данные из БД в defaultDate, но он глючит и отображает их не в том формате. Тоесть передаю данные в формате dd.mm.yyyy (например 12.04.1972), а на экране «1998-05-20T21:46:45+03:00»
                                                Ниже код (если defDate передать, тоже не тот формат)
                                                Если DeffaultDate не выставлять — соханяется и отображается все правильно… не пойму в чем причина

                                                <script type="text/javascript">
                                                            $(function () {
                                                              var defDate = moment('<?= $arResult["arUser"]["PERSONAL_BIRTHDAY"] ?>','mm/dd/yy');
                                                              var maxDate = new Date();
                                                              maxYear = maxDate.getYear()-18;
                                                              //текущее время - 18 лет
                                                              maxDate.setYear(maxYear);
                                                              $('#datetimepicker').datetimepicker({
                                                                locale: 'ru',
                                                                format: 'DD.MM.YYYY',
                                                                maxDate: maxDate,
                                                                defaultDate: '12.04.1972'
                                                              });
                                                            });
                                                          </script>
                                                1. Александр Мальцев # 0
                                                  Инициализацию компонента, имеющего id=datetimepicker, необходимо выполнять только один раз.
                                                  Установку defaultDate выполнять лучше так:
                                                  defaultDate: moment(12.04.1972',"DD-MM-YYYY")
                                                  
                                                  Для изменения даты используйте следующее:
                                                  //например, вывести в поле datetimepicker дату 12.04.1972 
                                                  $('#datetimepicker').data('DateTimePicker').date('12.04.1972');
                                                  
                                                2. Михаил # 0
                                                  Огромное спасибо автору!!!
                                                  Очень качественные полезные и легкие в понимании уроки!!!
                                                  Каждый раз, когда возникают вопросы по bootstrap -попадаю на ваш сайт и всегда нахожу ответы!!!)))
                                                  Спасибо большое вам!!!
                                                  1. Виталий # 0
                                                    Здравствуйте, подскажите пожалуйста, я использую только календарь, без времени, как сделать, чтобы при отметке на календаре даты он закрывался автоматически?
                                                    1. Александр Мальцев # 0
                                                      Для этого необходимо установить необходимый формат (например, DD.MM.YYYY):
                                                      $(function () {
                                                        $('#datetimepicker1').datetimepicker({
                                                          locale: 'ru',
                                                          format: 'DD.MM.YYYY'
                                                        });
                                                      });
                                                      
                                                      Он и так по умолчанию закрывается автоматически. Просто после ввода даты, он ждёт когда Вы укажете время. Необходимо отключить ввод времени, как это сделано выше.
                                                    2. Виталий # 0
                                                      Еще вопрос, сейчас при отркрытии календаря дата автоматом появляется и в самом поле, как изменить, чтобы поле оставалось пустым пока я не нажму на число?
                                                      1. Александр Мальцев # 0
                                                        Установить параметр useCurrent со значением равным false:
                                                        $(function () {
                                                          $('#datetimepicker1').datetimepicker({
                                                            locale: 'ru',
                                                            format: 'DD.MM.YYYY',
                                                            useCurrent: false
                                                          });
                                                        });
                                                        
                                                      2. Виталий # 0
                                                        Спасибо Александр. А как поменять цвет для иконок «выбрать время», «удалить», «закрыть»(внизу календаря)… по умолчанию они синие и в css файле стилей для них нет.
                                                        1. Александр Мальцев # 0
                                                          Как обычно. Тут ни какой документации нет, необходимо знать только css.
                                                          Например, цвет иконки «выбрать время»:
                                                          .bootstrap-datetimepicker-widget .glyphicon-time {
                                                            color: red;
                                                          }
                                                          
                                                          Чтобы это проще сделать, необходимо чтобы picker всегда оставался открытым.
                                                          Это можно сделать так (т.е. включить режим отладки):
                                                          $(function () {
                                                            $('#datetimepicker1').datetimepicker({
                                                              locale: 'ru',
                                                              debug:true
                                                            });
                                                          });
                                                          
                                                          1. Виталий # 0
                                                            Может кому то пригодится, сделал так:
                                                            .bootstrap-datetimepicker-widget .glyphicon {
                                                              color: red;
                                                            }
                                                            сразу для всех иконок.
                                                        2. Виталий # 0
                                                          Есть выбор периода обновления, 2 поля с датами с-по, соответственно начиная с завтрашней даты обновления быть не может в принципе, как ограничить выбор даты после текущей, тоесть завтрашняя и последующие даты были неактивными?
                                                          1. Александр Мальцев # 0
                                                            Будет так.
                                                            Код HTML:
                                                            с
                                                            <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 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>
                                                            
                                                            Код JavaScript:
                                                            $(function () {
                                                              // инициализация datetimepicker1 и datetimepicker2
                                                              $("#datetimepicker1").datetimepicker({locale: 'ru',
                                                                format: 'DD.MM.YYYY',
                                                                useCurrent: false,
                                                                maxDate: new Date()
                                                              });
                                                              $("#datetimepicker2").datetimepicker({locale: 'ru',
                                                                format: 'DD.MM.YYYY',
                                                                useCurrent: false,
                                                                maxDate: new Date()
                                                              });
                                                              // при изменении даты в 1 datetimepicker, она устанавливается как минимальная для 2 datetimepicker
                                                              $("#datetimepicker1").on("dp.change",function (e) {
                                                                $("#datetimepicker2").data("DateTimePicker").minDate(e.date);
                                                              });
                                                              // при изменении даты в 2 datetimepicker, она устанавливается как максимальная для 1 datetimepicker
                                                              $("#datetimepicker2").on("dp.change",function (e) {
                                                                $("#datetimepicker1").data("DateTimePicker").maxDate(e.date);
                                                              });
                                                            });
                                                            
                                                            1. Виталий # 0
                                                              Работает, только текущая(сегодняшняя) дата как и все последующие так-же не активна, а она желательно должна быть активной.
                                                              1. Александр Мальцев # 0
                                                                Так же вы хотели ограничить выбор даты после текущей. Дата вычисляется согласно часовому поясу, установленному на компьютере. Чтобы datetimepicker лучше отрабатывал, попробуйте убрать параметр useCurrent: false.
                                                                1. Виталий # 0
                                                                  Все правильно, так и хотел, но без ограничения текущей даты, если убрать useCurrent — работает, но дата вставляется автоматом при открытии календаря, это не подходит…
                                                                  Еще такой момент, если выберу дату например 5, 10, 20 дней назад, а потом текущую-тогда она выбирается.
                                                                  В другом варианте у меня есть ограничение до текущей даты, указал minDate: new Date() и текущая дата выбирается, по идее и в maxDate: new Date() она должна выбираться… возможно в самом коде календаря что-то не так…
                                                                  1. Александр Мальцев # 0
                                                                    Это ошибки в работе самого компонента, попробуйте поставить последнюю версию.
                                                                    1. Виталий # 0
                                                                      Да самая последняя и стоит.
                                                                      1. Виталий # 0
                                                                        Может можно написать как-то типа maxDate: блабла +1?
                                                                        1. Александр Мальцев # 0
                                                                          Попробуйте убрать useCurrent и установить полям пустые значения.
                                                                          $(function () {
                                                                            $("#datetimepicker1").datetimepicker({locale: 'ru',
                                                                              format: 'DD.MM.YYYY', maxDate: new Date()
                                                                            });
                                                                            $("#datetimepicker2").datetimepicker({locale: 'ru',
                                                                              format: 'DD.MM.YYYY', maxDate: new Date()
                                                                            });
                                                                            $("#datetimepicker1 input").val('');
                                                                            $("#datetimepicker2 input").val('');
                                                                            $("#datetimepicker1").on("dp.change",function (e) {
                                                                              $("#datetimepicker2").data("DateTimePicker").minDate(e.date);
                                                                            });
                                                                            $("#datetimepicker2").on("dp.change",function (e) {
                                                                              $("#datetimepicker1").data("DateTimePicker").maxDate(e.date);
                                                                            });
                                                                          });
                                                                          
                                                          2. Виталий # 0
                                                            А где в самих исходниках изменить язык на русский и формат на YYYY-MM-DD, чтобы не писать их каждый раз для каждого id?
                                                            1. Александр Мальцев # 0
                                                              Это делается не так. Вам всё равно придётся инициализировать каждый элемент.
                                                              Если Вам необходимо это сделать для некоторой группы, то присвойте не id, а определённый класс (например, dtp) необходимым datetimepicker.
                                                              $(function () {
                                                                // будут инициализированы все элементы, имеющие класс dtp
                                                                $('.dtp').datetimepicker({
                                                                  locale: 'ru',
                                                                  format: 'DD.MM.YYYY',
                                                                  useCurrent: false
                                                                });
                                                              });
                                                              
                                                              1. Виталий # 0
                                                                Язык я нашол где сменить, это файл moment-with-locales.min.js(locale(«en») изменил на ru), хотелось бы все же и формат даты изменить с того, что по умолчанию, на свой — YYYY-MM-DD, других у меня на сайте нет, а что id прописывать, что класс — от перемены мест слагаемых…
                                                                1. Александр Мальцев # 0
                                                                  Она устанавливается в файле bootstrap-datetimepicker.js (в свойстве format):
                                                                  ...
                                                                  $.fn.datetimepicker.defaults = {
                                                                    timeZone: '',
                                                                    format: 'YYYY-MM-DD',
                                                                  ...
                                                                  
                                                                  1. Виталий # 0
                                                                    Спасибо, все получилось.
                                                            2. Виталий # 0
                                                              Подскажите, в чем может быть проблема? Добавляю в js файле строки
                                                              $("#datetimepicker6").on("dp.change", function (e) {
                                                                          $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
                                                                      });
                                                                      $("#datetimepicker7").on("dp.change", function (e) {
                                                                          $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
                                                                      });
                                                              другие скрипты на сайте перестают работать, а когда добавляю такие
                                                              $('#datetimepicker6').datetimepicker();
                                                              тоесть без минимума/максимума-все остальные скрипты работают нормально.
                                                              В чем может быть ошибка и куда копать?
                                                              1. Александр Мальцев # 0
                                                                Попробуйте обновить компонент DateTimePicker и moment до последней версии.
                                                                1. Виталий # 0
                                                                  Вопрос закрыт, конфликт был с
                                                                  $(function () {
                                                                  //код
                                                                  });
                                                                  заменил на
                                                                  (function () {
                                                                  //код
                                                                  })();
                                                                  теперь все работает
                                                              2. Виталий # 0
                                                                Скажите пожалуйста, как отключить выбор столетий?
                                                                1. Александр Мальцев # 0
                                                                  Добавьте в CSS следующие стили:
                                                                  .bootstrap-datetimepicker-widget .datepicker-years thead .picker-switch {
                                                                    cursor: default;
                                                                    pointer-events: none;
                                                                  }
                                                                  
                                                                  1. Виталий # 0
                                                                    Александр, вы навеняка подключали данный плагин к каким-то cms, подскажите, в чем может быть проблема: у меня везде в шаблонах плагин работает нормально, а вот если добавляю дополнительное поле(дата) через функцию добавления доп. полей-календарь не открывается вообще.
                                                                    1. Александр Мальцев # 0
                                                                      Обычно посредством подключения файлов js и css Bootstrap DateTimePicker к странице. В CMS MODX делается так, но может в других системах есть какие-то особенности…
                                                                      1. Виталий # 0
                                                                        Посмотрите, может вы поймете, что не так…
                                                                        Функция выбора даты
                                                                        function datepicker($name, $value = '', $sep = '-') {
                                                                        	global $cms_calendar_id;
                                                                        	$calendar = '';
                                                                        	$id = str_replace(array('[', ']'), array('', ''), $name);
                                                                        	if(!$cms_calendar_id) {
                                                                        		$cms_calendar_id = 1;
                                                                        		$calendar .= '<link rel="stylesheet" href="datepicker.css"><script type="text/javascript" src="moment.js"></script><script type="text/javascript" src="datepicker.js"></script>';
                                                                        	}
                                                                        	$calendar .= '<input type="text" name="'.$name.'" id="'.$id.'" value="'.$value.'" class="form-control"/>';
                                                                        	return $calendar;
                                                                        }
                                                                        Календарь в шаблоне при добавлении объявления
                                                                        <div class="input-group date" id="datepicker">
                                                                        <span class="input-group-addon">
                                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                                        </span>
                                                                        <?php echo datepicker('post[totime]', $totime);?>
                                                                        </div>
                                                                        Js
                                                                        <script type="text/javascript">
                                                                                    $(function () {
                                                                                        $('#datepicker').datetimepicker();
                                                                                    });
                                                                        </script>
                                                                        Это все работает.

                                                                        Календарь в дополнительных полях
                                                                        case 'date':
                                                                        	$html .= '<div class="input-group date" id="datepicker">';
                                                                        	$html .= '<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>';
                                                                        	$html .= datepicker('post_fields['.$v['name'].']', $value);
                                                                        	$html .= '</div>';
                                                                        	$html .= '<span class="text-danger" id="post_dfields'.$v['name'].'"></span>';
                                                                        break;
                                                                        Js по аналогии с тем, что указал выше.
                                                                        Тут открываться не хочет никак, хотя с другими календарями работает, например вот с этим, но он меня не устраивает.
                                                                        1. Александр Мальцев # 0
                                                                          Не знаю, может он не активируется. Попробуйте проверить, есть ли ошибки в консоли браузера.
                                                                          1. Виталий # 0
                                                                            Нет ошибок. У меня исходный календарь работает только с onlclick="" в input, может и для данного календаря можно как то использовать onclick=«блабла»?
                                                                            1. Виталий # 0
                                                                              Все, вопрос решил, теперь все работает, спасибо за помощь!
                                                                2. Anastasia # 0
                                                                  Здравствуйте, Александр.
                                                                  Подскажите пожалуйста, как мне сделать так, чтобы при выборе диапазона дат, ниже появлялась таблица. определенная таблица к определенной дате.
                                                                  1. Александр Мальцев # 0
                                                                    Вам необходимо при изменении даты, получить их значения. После этого в зависимости от некотрых условий выводить определённую таблицу:
                                                                    $("#datetimepicker1").on("dp.change", function (e) {
                                                                      // получить значение даты 1
                                                                      var date1 = $('#datetimepicker1 input').val();
                                                                      // получить значение даты 2
                                                                      var date2 = $('#datetimepicker2 input').val();
                                                                      // условия, на основании которых будет выводиться определённая таблица
                                                                      // if ...
                                                                    });
                                                                    
                                                                    1. Anastasia # 0
                                                                      т.е. мне условие того что выведется при выборе даты писать в .val(' ')? или куда это писать?
                                                                      1. Александр Мальцев # 0
                                                                        Здесь можно только догадываться… Получить выбранную дату из поля input с datetimepicker можно использую следующую строчку:
                                                                        var date1 = $('#datetimepicker1 input').val(); //какая-то дата в переменной date1
                                                                        
                                                                        Вторую дату получаем аналогично (переменная date2). Дальше вам необходимо написать какой-то алгоритм. Например, вычесть одну дату из другой, или что-то ещё для того чтобы получить какой-то диапазон. Далее не совсем понятно…
                                                                        Отобразить таблицу можно используя методы jQuery show. Для скрытия таблицы можно использовать метод hide.
                                                                  2. Donch # 0
                                                                    Здравствуйте, Александр!
                                                                    Спасибо за прекрасную работу!
                                                                    Естественно, хочется отправлять введенную дату на сервер. Предполагается, что отправка будет реализована с помощью кнопки input type = «submit» примерно так:
                                                                    <form>
                                                                          <div >
                                                                            <input type="text" class="form-control" id="datetimepicker2">
                                                                    		<input type = "submit" action="addTime">
                                                                          </div>
                                                                        </form>
                                                                    
                                                                    Собственно вопрос: в каком виде (какой тип данных) отправляется на сервер? Это строка (String) в формате типа «13/11/2016 12:43» или что-то другое?
                                                                    1. Александр Мальцев # 0
                                                                      Здравствуйте. Данные передаются на сервер в текстовом формате. Их можно посылать методом POST или GET. Метод POST применяется тогда, когда эти данные необходимо добавить в базу. Когда на основании этих данных необходимо выбрать другую информацию (т.е. информация не попадает в базу) используется метод GET.
                                                                      Можно, например, в формате ISO:
                                                                      $('#datetimepicker1').data("DateTimePicker").date()._d.toISOString()
                                                                      

                                                                    Вы должны авторизоваться, чтобы оставлять комментарии.