Bootstrap 3 DateTimePicker - Календарь для input

Александр Мальцев
Александр Мальцев
170K
265
Содержание:
  1. Работа с датой в HTML5
  2. Обзор компонента Bootstrap 3 DateTimePicker
  3. Примеры работы с Bootstrap 3 DateTimePicker
  4. Комментарии

В этой статье рассмотрим компонент 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", переключения в режим выбора года и др.).

Комментарии:

  1. Святослав Афанасьев
    21 апреля 2021, 01:43
    Столкнулся с такой проблемой, вообще я воспринимал Bootstrap как возможность улучшить дизайн и универсальность для мобильных устройств, то, что они сделали с сеткой это отлично. Но вот Datatime picker отображается ужасно. При нажатии на него на экране телефона вылезает огромная экранная клавиатура, которая к тому же перекрывает его самого. Стандартный из HTML отображается красиво, причем и Android и iOs имеют свое прикольное отображение. Но он не поддерживается многими браузерами. Как опытные люди выходили из ситуации? Браузеров ведь огромное количество.
    1. Святослав Афанасьев
      22 апреля 2021, 01:50
      Пока нашел такой выход. Наверное кривой но может кому-то пригодится.
      1. Создаю два элемента на странице Datatimepicker и из HTML5 Datatime-local.
      2. При старте определяю тип поля в Datatime-local, если это Text, то его прячу свойством Display='none'
      3. Если это не текст то исчезает Datatimepicker.

      Таким образом виден только один из них. Если это современный браузер то Datatime-local, если старый то Datatimepicker.
      Ну и для того чтобы все не мелькало и было все красиво, элемент Datatimepicker создаю динамически, Александр написал здесь статью как это сделать на JS и jQuery.
      1. Александр Мальцев
        22 апреля 2021, 08:07
        Как вариант, можно просто сделать с datetime-local:
        <div class="col-xs-6">
          <div class="form-group">
            <input type="datetime-local" class="form-control">
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <input type="datetime-local" class="form-control">
          </div>
        </div>
        
        А в JavaScript уже прописать, что если datetime-local не поддерживается (type таких элементов равен text), то добавить к ним необходимые элементы и инициализировать их как datetimepicker:
        $(function () {
          $('[type="datetime-local"]').each(function (index, $element) {
            var type = $(this).prop('type');
            if (type === 'text') {
              $(this).prop('type', 'text');
              $(this).wrap('<div class="input-group" id="datetimepicker-' + (index + 1) + '"></div>');
              $(this).after('<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>');
              $(this).closest('.input-group').datetimepicker({
                locale: 'ru'
              });
            }
          });
        });
        
        Пример доступен по этой ссылке: b3-dtm-2
        1. Святослав Афанасьев
          22 апреля 2021, 11:29
          Спасибо, так красивее, меньше кода
    2. Святослав Афанасьев
      17 апреля 2021, 20:14
      Александр, подскажите есть ли возможность поймать событие Finish? Т.е. когда изменения фактически закончились, например при потере фокуса. Мне это нужно для отсылки post на сервер, а то слать каждое изменение по change это много мусора.
      1. Александр Мальцев
        20 апреля 2021, 03:36
        Можно при потери фокуса (blur):
        $('#datetimepicker input').on('blur', function () {
          const date = $('#datetimepicker').data('DateTimePicker').date().format('DD.MM.YYYY');
          // ...
        });
        
        1. Святослав Афанасьев
          21 апреля 2021, 01:37
          Пробовал так, но blur скачет, при вводе с клавиатуры он трижды меняет focus на blur.
          1. Александр Мальцев
            22 апреля 2021, 08:35
            Попробуй с setTimeout поиграться. Например, не сразу отправлять после потери фокуса, а через 2 секунды. Если за этот промежуток времени элемент опять получит фокус, то данные не отправлять на сервер.
            let timeoutId = null;
            $('input').on('focus', function () {
              if (timeoutId) {
                clearTimeout(timeoutId);
              }
            });
            $('input').on('blur', function () {
              if (timeoutId) {
                clearTimeout(timeoutId);
              }
              timeoutId = window.setTimeout(function () {
                // send...
              }, 2000);
            });
            
            1. Святослав Афанасьев
              22 апреля 2021, 11:28
              Да спасибо!
      2. Roman
        25 декабря 2020, 13:06
        Добрый день.
        Можно как то реализовать что бы после выбора даты открывался timepicker? Что бы когда я допустил нажал на 31.12.2020 сразу показала меню выбора времени?
        1. Жора Дорфман
          19 ноября 2020, 21:32
          Приветствую! Курю мануал 3й день и пока не разобрался. Может, подсткажете?
          Есть начальная дата и конечная. По ним 2 вопроса:
          1) Как высчитать количество дней между датами?
          2) Как в календаре с конечной датой блокировать даты, которые раньше, чем я уже выбрал в «начальном» календаре? То есть если я выбрал начальную дату 1 декабря, то в календаре конечной даты надо заблокировать все даты до 1 декабря.
          Кусок кода прилагаю:
          		<script>
          		    $(function () {
          		        $('#welcome').datetimepicker({
          		            locale: 'ru',
          		            format: 'DD.MM.YYYY',
          		            minDate: new Date,
          		        });
          
          		        $('.glyphicon-remove').click(function () {
          		            $('#welcome').data("DateTimePicker").clear();
          		        });
          		    });
          		</script>
          
          <script>
              $(function () {
                  $('#perenos').datetimepicker({
                      locale: 'ru',
                      format: 'DD.MM.YYYY',
                      minDate: new Date,
                  });
          
                  $('.glyphicon-remove').click(function () {
                      $('#perenos').data("DateTimePicker").clear();
                  });
              });
          </script>
          
          Заранее благодарен за помощь
          1. Александр Мальцев
            21 ноября 2020, 15:28
            Привет!
            Для того чтобы во втором календаре нельзя было выбрать дату меньше, чем в первом и наоборот необходимо написать следующее:
            $('#welcome').datetimepicker({
              locale: 'ru',
              format: 'DD.MM.YYYY',
              minDate: moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }),
            });
            $('#perenos').datetimepicker({
              locale: 'ru',
              format: 'DD.MM.YYYY',
              minDate: moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }),
            });
            $("#welcome").on("dp.change", function (e) {
              const date = e.date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
              $('#perenos').data("DateTimePicker").minDate(date);
            });
            $("#perenos").on("dp.change", function (e) {
              const date = e.date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
              $('#welcome').data("DateTimePicker").maxDate(date);
            });
            
            Высчитать количество дней между датами:
            // получаем дату из 1 календаря
            let welcomeData = moment($('#welcome').data("DateTimePicker").date());
            welcomeData.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
            // получаем дату из 2 календаря
            let perenosData = moment($('#perenos').data("DateTimePicker").date());
            perenosData.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
            // получаем разницу в днях
            const diffDays = perenosData.diff(welcomeData, 'days');
            
          2. Нариман
            29 августа 2020, 15:35
            Александр, добрый день!
            Подскажите пожалуйста. Как сделать чтоб дата была доступна до определенного времени в календаре. Допустим до завтра 8.30 утра.
            Заранее спасибо.
            1. vadim
              13 августа 2020, 23:40
              Как сделать так, чтобы показывало сразу 2 месяца? И почему когда хочу поменять weekStart пишет, что функция not recognized?
              1. Ixa94
                10 августа 2020, 22:27
                хай, почему то возникла проблема дата и время отображаются, а вот сам календарь и выбор времени нет(
                1. Ирина
                  18 июня 2020, 13:19
                  Здравствуйте. Необходимо ограничить диапазон времени с 9 до 17 с интервалом 15мин. По умолчанию 9.00
                  Сейчас код такой, но работает не корректно. Помогите, пожалуйста
                  $('.timepicker-f').datetimepicker({
                  		format: "HH:mm",
                  		disabledTimeIntervals: [
                  		[ moment().hour(0).minutes(0), moment().hour(09).minutes(0) ],
                  		[ moment().hour(17).minutes(0), moment().hour(24).minutes(0) ] 
                  		],
                  		icons: {
                  			up: 'fa fa-angle-up',
                  			down: 'fa fa-angle-down',
                  			previous: 'fa fa-angle-left',
                  			next: 'fa fa-angle-right',
                  		}
                  	});
                  1. Ирина
                    18 июня 2020, 16:15
                    Теперь код выглядит так
                    var dateNow = new Date();
                        $('.timepicker-f').datetimepicker({
                    		format: "HH:mm",
                    		stepping: 15,
                    		defaultDate:moment(dateNow).hours(9).minutes(0),
                    		disabledTimeIntervals: [
                    		[ moment().hour(0).minutes(0), moment().hour(09).minutes(0) ],
                    		[ moment().hour(17).minutes(0), moment().hour(24).minutes(0) ] 
                    		],
                    		icons: {
                    			up: 'fa fa-angle-up',
                    			down: 'fa fa-angle-down',
                    			previous: 'fa fa-angle-left',
                    			next: 'fa fa-angle-right',
                    		}
                    	});
                    сейчас почти хорошо, но время не возвращается к исходному значению 9:00
                    1. Александр Мальцев
                      21 июня 2020, 10:54
                      Попробуйте так:
                      disabledTimeIntervals: [
                        [ moment().hour(0).minutes(0), moment().hour(08).minutes(59) ],
                        [ moment().hour(17).minutes(1), moment().hour(24).minutes(0) ] 
                      ],
                      
                  2. Эрик
                    13 марта 2020, 11:19
                    Здравствуйте. Не подскажите, как реализовать следующую задачу?
                    Есть два блока, с input radio и полем для выбора даты со временем(datetimepicker).
                    <div class="form-group">
                        <label>Приоритет выполнения</label>
                            <div style="margin-top: 7px;">
                          <?php if (is_array($priorities)): ?>
                              <?php foreach ($priorities as $k=>$priority): ?>
                            <div class="radio radio-<?php echo $priority['CLASS']; ?> radio-inline">
                                            <input type="radio" name="priority" id="radio<?php echo $priority['ID']; ?>" value="<?=$priority['ID']?>" <?php if ($priority['NAME'] == 'Низкий') echo 'checked'?>>
                                            <label for="radio<?php echo $priority['ID']; ?>"><?php echo $priority['NAME']; ?></label>
                                        </div>
                        <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                    </div>
                    <div class="form-group">
                        <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>
                    </div>
                    Файл js для календаря:
                    $(function () {
                        $('#datetimepicker6').datetimepicker({
                            locale: 'ru'
                        });
                        $('.glyphicon-remove').click(function () {
                            $('#datetimepicker6').data("DateTimePicker").clear();
                        });
                    });
                    Скрин:

                    В блоке с input radio в цикле я отображаю приоритеты выполнения задачи. Там есть значение дней, оно хранится в днях. Нужно чтобы при выборе приоритета, в поле с датой автоматически проставлялось значения(текущая дата-время + значение дней). Как только страница прогружена, по умолчанию выбран input radio с названием «Низкий»(это +10 дней). Следовательно в поле даты уже должна быть выбрана конкретная дата. Количество дней у меня хранится в $priority['DAYS'], где его указывать лучше я не знаю. В value указано id, для последующей обработки в php. Так же должна быть возможность сменить дату, после выбранного приоритета.
                    1. Александр Мальцев
                      14 марта 2020, 14:39
                      Здравствуйте.
                      Указывать количество дней для радиокнопок лучше с помощью атрибута data.
                      Например:
                      <input type="radio" name="priority" id="radio-3" value="low" checked data-days="10">Низкий
                      
                      Далее подставить значение data в поле можно с помощью JavaScript:
                      $('#datetimepicker').datetimepicker({format: 'DD.MM.YYYY', locale: 'ru'});
                      var numberOfDays = +$('[name="priority"]:checked').attr('data-days');
                      var date = moment().add(numberOfDays, 'days');
                      $('#datetimepicker').data("DateTimePicker").date(date);
                      $('[name="priority"]').on('change', function(){
                        var numberOfDays = +$(this).attr('data-days');
                        var date = moment().add(numberOfDays, 'days');
                        $('#datetimepicker').data("DateTimePicker").date(date);
                      });
                      
                      Пример, в котором всё это собрано находится здесь.
                      1. Эрик
                        16 марта 2020, 10:32
                        Я решил так:
                        <div class="form-group">
                        	<label>Приоритет выполнения</label>
                        		<div style="margin-top: 7px;">
                        			<?php if (is_array($priorities)): ?>
                        				<?php foreach ($priorities as $k=>$priority): ?>
                        					<div class="radio radio-<?php echo $priority['CLASS']; ?> radio-inline" onchange="autoInsertDate()">
                        						<input type="radio" name="priority" id="radio<?php echo $priority['ID']; ?>" value="<?=$priority['ID']?>, <?=$priority['DAYS']?>" <?= isset($saved_priority) && $saved_priority==$priority['ID'] ? 'checked="checked"':'' ?>>
                                                                    	<label for="radio<?php echo $priority['ID']; ?>"><?php echo $priority['NAME']; ?></label>
                                                                </div>
                        				<?php endforeach; ?>
                        			<?php endif; ?>
                        		</div>
                        </div>
                        <div class="form-group">
                        	<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 datepickerbutton" name="data" id="da" value="<?=$saved_data?>" />
                        		<span class="input-group-addon">
                        			<span class="glyphicon glyphicon-remove"></span>
                        		</span>
                        	</div>
                        </div>
                        
                        Файл JS:
                        $(function () {
                            $('#datetimepicker6').datetimepicker({
                                locale: 'ru'
                            });
                            $('.glyphicon-remove').click(function () {
                                $('#datetimepicker6').data("DateTimePicker").clear();
                            });
                        });
                        
                        function autoInsertDate() {
                            let d = $('input[name=priority]:checked').val();
                            let days = d.split(',')[1];
                            let h = days * 24;
                        
                            let currentDate = new Date();
                            var monthes = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
                        
                            currentDate.setMilliseconds(h * 60 * 60 * 1000);
                            let year = currentDate.getFullYear();
                            let month = monthes[currentDate.getMonth()];
                            let day = currentDate.getDate();
                            let hour = currentDate.getHours();
                            let minutes = (currentDate.getMinutes() < 10) ? '0' + currentDate.getMinutes() : currentDate.getMinutes();
                            let time = day + '.' + month + '.' + year + ' ' + hour + ':' + minutes;
                        
                            document.getElementById('da').value = time;
                        }
                        
                        Мой вариант тоже работоспособный, но с точки зрения производительности Ваш вариант является лучше?
                    2. Roma
                      04 марта 2020, 08:16
                      Добрый день, Александр!
                      Можете подсказать, как сделать выбор в одном инпуте период дат?
                      И как добавить кнопку «ок»?
                      1. Александр Мальцев
                        05 марта 2020, 14:40
                        Здравствуйте! Для этого лучше использовать другой плагин, предназначенный именно для этого. Например Date Range Picker.
                        1. Roma
                          19 марта 2020, 09:40
                          Супер, спасибо!
                      2. frinteza
                        28 февраля 2020, 16:05
                        1. Cкажите, как можно реализовать с помощью knockout.

                        2. И как можно реализовать 2 time picker с одновременным показом inline блока. Просто получается, что inline показывается там где стоит фокус ни input.


                        3. И еще вопрос: на модалке, где показывается блок time picker, он находится внутри модального окна.

                        Такое ощещение, что проблема с «opacity»
                        1. Александр Мальцев
                          29 февраля 2020, 09:14
                          Можно создать 2 inline DateTimePicker и 2 input. В input просто отображать выбранное значение соответствующего inline DateTimePicker. Это один из вариантов как это можно выполнить. Стандартной возможности сделать так как вы хотите в этом DateTimePicker нет.
                        2. Вадим
                          27 февраля 2020, 11:17
                          Александр, добрый день.
                          Столкнулся с такой проблемой… Когда выбираю минимальную и максимальную дату(допустим можно выбрать даты с 02.03.2020 по 08.03.2020), то последнее значение 08.03.2020 не выбирается. Т.е. чтобы выбрать эту дату, нужно вначале выбрать любую другу, а потом уже нужную. Помогите решить вопрос…
                          Вот код:
                          <script>$(function(){ $('#datetimepicker1').datetimepicker({format: 'DD.MM.YYYY',locale: 'ru',useCurrent: false,minDate: (moment('02.03.2020','DD.MM.YYYY')),maxDate: (moment('08.03.2020','DD.MM.YYYY'))})});</script>
                          
                          1. Александр Мальцев
                            29 февраля 2020, 08:41
                            Здравствуйте!
                            Установите 08.03.2020 на конец дня:
                            <script>$(function(){ $('#datetimepicker1').datetimepicker({format: 'DD.MM.YYYY',locale: 'ru',useCurrent: false,minDate: (moment('02.03.2020','DD.MM.YYYY')),maxDate: (moment('08.03.2020','DD.MM.YYYY').endOf('day'))})});</script>
                          2. Roma
                            12 декабря 2019, 11:56
                            Добрый день!
                            Подскажите пожалуйста как вывести автоматически, при нажатии на input и на иконку календаря. В данный момент надо нажимать на иконку календаря.
                            1. Александр Мальцев
                              12 декабря 2019, 15:06
                              Привет!
                              Чтобы это реализовать, можно просто при нажатию на input программно вызвать событие click на иконке календаря.
                              $('#datetimepicker1 > input').click(function(){
                                $('#datetimepicker1 .input-group-addon').trigger('click');
                              });
                              
                              Пример можно посмотреть здесь.
                              1. Roma
                                18 декабря 2019, 14:45
                                Спасибо большое!
                            2. Владислав
                              11 ноября 2019, 15:24
                              Добрый день.

                              Спасибо за уроки.
                              Возник вопрос, а как получить значение, которое выбрано в datetimepiker?
                              Чтобы потом его можно было отправить серверу.
                              Я читал документацию, но нигде не нашел описания.
                              Может не внимательно :)

                              Спасибо.
                              1. Александр Мальцев
                                12 ноября 2019, 15:13
                                Привет! Пожалуйста!
                                Посмотрите ответ в этом комментарии.
                              2. Александр
                                02 ноября 2018, 14:34
                                Добрый день.
                                Прошу помочь с проблемой, встроил данный плагин в форму запроса данных из базы, при переходе с которой открывается эта же страница с формой и парой таблиц внизу с данными. Как сделать так чтобы при открытии страницы в форме оставались выбранные даты? Из вашей статьи вынес только 1 вариант: добавить кнопку в которую запихивать дату при переходе и вызывать ее автоматически.
                                1. Александр Мальцев
                                  04 ноября 2018, 04:27
                                  Добрый! Тут много вариантов. Можно их, например, сохранить данные в LocalStorage, а затем при открытии страницы проверять есть ли они там и если да, то загружать их оттуда. Можно также воспользоваться сессией, т.е. механизмом, с помощью которого можно сохранять данные на стороне сервера. Или другими способами.
                                2. Ivan
                                  26 октября 2018, 15:01
                                  Добрый день! Спасибо за замечательный календарь. И отличные комментарии очень помогли.
                                  Но столкнулся с таким вопросом, что при подключении файла: href=«css/bootstrap.min.css» / — верстка плывет. Я его отключаю, календарь работаем, только не показывает стрелки на переход месяцев и логотип времени внизу. Как быть? Спасибо.

                                  1. Александр Мальцев
                                    28 октября 2018, 12:07
                                    Добрый! В этом случае могу посоветовать взять только необходимые стили из bootstrap.css, адаптировать их под свой дизайн, а затем уже вставить полученный CSS код в свой файл.
                                  2. Bujhm
                                    23 августа 2018, 14:27
                                    Добрый день!
                                    Подскажите, что за беда с этой локализацией?
                                    Ставил
                                    $('#datepicker').datepicker({
                                          autoclose: true,
                                          locale: 'RU'
                                    
                                    Выдает английский календарь
                                    Написал
                                    $('#datepicker').datepicker({
                                          autoclose: true,
                                          format: 'DD.MM.YYYY',
                                          locale: 'RU',
                                          daysOfWeek: [
                                                'Вс',
                                                'Пн',
                                                'Вт',
                                                'Ср',
                                                'Чт',
                                                'Пт',
                                                'Сб'
                                            ],
                                          monthNames: [
                                                'Январь',
                                                'Февраль',
                                                'Март',
                                                'Апрель',
                                                'Май',
                                                'Июнь',
                                                'Июль',
                                                'Август',
                                                'Сентябрь',
                                                'Октябрь',
                                                'Ноябрь',
                                                'Декабрь'
                                            ],
                                            firstDay: 1
                                    
                                        })  
                                    Календарь все равно выдается на английском, да еще и мало того, но вместо даты пишет
                                    Tuesday.July.YYYY

                                    :((
                                    помогите, подскажите, как его локализовать на русский?
                                    1. Александр Мальцев
                                      23 августа 2018, 14:44
                                      datepicker — это не DateTimePicker, в нём язык устанавливается по-другому. Если этот плагин является bootstrap-datepicker, то русская локаль в нём устанавливается с помощью свойства language.
                                      language: 'ru'
                                      
                                      1. Bujhm
                                        23 августа 2018, 15:35
                                        да, bootstrap-datepicker,
                                        поставил language: 'ru'
                                        все равно по английски
                                        нашел bootstrap-datepicker.ru.min.js
                                        !function(a){a.fn.datepicker.dates.ru={days:["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"],daysShort:["Вск","Пнд","Втр","Срд","Чтв","Птн","Суб"],daysMin:["Вс","Пн","Вт","Ср","Чт","Пт","Сб"],months:["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],monthsShort:["Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"],today:"Сегодня",clear:"Очистить",format:"dd.mm.yyyy",weekStart:1,monthsTitle:"Месяцы"}}(jQuery);
                                        может его надо поставить в список скриптов а странице, чтобы заработал language: 'ru'
                                        1. Bujhm
                                          23 августа 2018, 15:48
                                          Да, именно так и надо было. Загрузить скрипт, тогда сработал language
                                    2. Николай
                                      10 августа 2018, 15:34
                                      Александр, почему это может не работать в браузере Safari?
                                      1. Николай
                                        10 августа 2018, 16:20
                                        в IE тоже не работает. Ваш пример почему то тоже.
                                        1. Александр Мальцев
                                          10 августа 2018, 17:31
                                          Данные браузеры поддерживаются. В каких именно версиях не работает? Попробуйте отключить расширения (если они есть) в указанных браузерах, может они это дело блокируют.
                                          1. Николай
                                            10 августа 2018, 18:09
                                            убираю параметр
                                            defaultDate: moment('01.01.2018').format('DD.MM.YYYY')
                                            и все работает…
                                            1. Александр Мальцев
                                              12 августа 2018, 04:56
                                              Попробуй обновить библиотеку moment.js до последней версии. Во всех премарах статьи теперь используется последняя на текущий момент версия moment.js.
                                      2. Denis
                                        01 июня 2018, 06:33
                                        Добрый день, Александр. Спасибо что не первый раз мне помогаете.
                                        Хочу отредактировать стили календаря, но возникает вопрос:
                                        Как сделать чтобы форма самого календаря при появлении оставалась а не исчезала. Когда я пробую посмотреть сетку html этого календаря, то календарь исчезает и сетка (которая выводиться в браузере через F12) тоже исчезает, срабатывает display:none.
                                        Пробовал найди через js файлы подгрузку display, безуспешно. !important в css не помог.
                                        Может быть вы знаете как быть, а так хочется задизайнить календарь. И как в таком случае добавить в эту сетку html дополнительные классы.
                                        Заранее Вам благодарен!
                                        1. Александр Мальцев
                                          05 июня 2018, 14:01
                                          Добрый! Для этого в конструкцию инициализации datetimepicker необходимо добавить параметр debug со значением равным true.
                                          $(function () {
                                            $('#datetimepicker1').datetimepicker({
                                              debug: true
                                            });
                                          });
                                          
                                        2. Александра
                                          10 апреля 2018, 11:34
                                          Здравствуйте, возникает проблема при вызове календаря (окошечко под календарь появляется, но самих дат и месяцов нет, также как и времени).
                                          В консоли выводится ошибка:
                                          TypeError: o is null
                                          datetimepickerFactory/e.fn.datetimepicker/s/</d<
                                          Подключения:
                                                  <link rel="stylesheet" type="text/css" href="/core/web/css/bootstrap.min.css"/>
                                                  <link rel="stylesheet" type="text/css" href="/core/web/css/bootstrap-theme.min.css"/>
                                                  <link rel="stylesheet" type="text/css" href="/core/web/css/custom.css"/>
                                                  <link rel="stylesheet" type="text/css" href="/core/web/css/datatables.min.css"/>
                                                  <link rel="stylesheet" type="text/css" href="/core/web/css/chosen.min.css"/>
                                                  <link rel="stylesheet" type="text/css" href="/core/web/css/jquery.datetimepicker.min.css"/>
                                          
                                                  <script type="text/javascript" src="/core/web/js/jquery.min.js"></script>
                                                  <script type="text/javascript" src="/core/web/js/bootstrap.min.js"></script>
                                                  <script type="text/javascript" src="/core/web/js/picklist.js"></script>
                                                  <script type="text/javascript" src="/core/web/js/datatables.min.js"></script>
                                                  <script type="text/javascript" src="/core/web/js/randomColor.js"></script>
                                                  <script type="text/javascript" src="/core/web/js/control-modal.min.js"></script>
                                                  <script type="text/javascript" src="/core/web/js/chosen.jquery.min.js"></script>
                                                  <script type="text/javascript" src="/core/web/js/moment.min.js"></script>
                                                  <script type="text/javascript" src="/core/web/js/ru.js"></script>
                                                  <script type="text/javascript" src="/core/web/js/jquery.datetimepicker.min.js"></script>
                                          
                                          1. Александр Мальцев
                                            12 апреля 2018, 17:38
                                            Здравствуйте!
                                            Не знаю, так сложно сказать. Попробуйте обновить плагин datetimepicker до последней версии. А файл moment.min.js у вас уже с локалями?
                                          2. Алексей
                                            09 марта 2018, 00:14
                                            Здравствуйте. Заметил такую странность. Если установить русский язык
                                            locale: 'ru'
                                            , и выставить промежуток времени, где можно производить выбор даты, то locale не работает, даже на вашем примере, где я убрал не нужные кнопки, по клику которых вызывается функция.
                                            1. Александр Мальцев
                                              09 марта 2018, 11:45
                                              Здравствуйте.
                                              Так не корректно указывать дату. Её необходимо задавать в формате ISO или с помощью функции moment().
                                              После исправления примера, он стал работать уже корректно.
                                              Установка даты с помощью moment():
                                              $('#datetimepicker3').data("DateTimePicker").minDate(moment('05.11.2017','DD.MM.YYYY'));         $('#datetimepicker3').data("DateTimePicker").maxDate(moment('25.11.2017','DD.MM.YYYY'));
                                              
                                              1. Алексей
                                                09 марта 2018, 12:35
                                                Если написать так, то действительно с locale все в порядке, но возникает другая проблема. При загрузке страницы дата уже выбрана сразу. Протестировал на вашем примере без кнопок minDate(«05.11.2017») и maxDate(«25.11.2017»). Смысл в выборе интервала, чтобы пользователь сам выбрал дату.
                                                1. Александр Мальцев
                                                  09 марта 2018, 15:00
                                                  Поправил и этот момент.
                                                  Добавил эту строчку:
                                                  $('#datetimepicker3').data("DateTimePicker").date(null);
                                                  
                                                  1. Алексей
                                                    09 марта 2018, 15:24
                                                    Вот теперь все супер. Спасибо за помощь, отличная статья!
                                            2. momento
                                              28 февраля 2018, 05:59
                                              Приветствую, почему-то есть такой момент, со стилями — календарь не адаптивный, когда смотришь в мобильной версии — все даты выстраиваются в одну вертикальную линию… — как быть?

                                              <img
                                              src=«https://itchief.ru/assets/uploadify/5/a/8/5a894d8dd6350e33426cb909c9d81b56s.jpg» class=«fancybox thumbnail center»>
                                              1. Александр Мальцев
                                                09 марта 2018, 12:07
                                                Не знаю, может быть вы стили Bootstrap DateTimePicker не подключили, или стили самого фреймворка Bootstrap 3.
                                              2. Света
                                                01 февраля 2018, 22:53
                                                Здравствуйте. Сайт на opencart. Есть задача сделать расписание курсов обучения. У курсов есть дата начала и дата окончания, которые по необходимости нужно менять. Все хорошо, виджет по вашему описанию сразу заработал. Так вот год, месяц, число, час меняется и сохраняется в БД без проблем, а минуты не сохраняются. Подскажите пожалуйста почему?
                                                1. Александр Мальцев
                                                  09 марта 2018, 12:14
                                                  Здравствуйте. Проверьте формат даты.
                                                2. Kris
                                                  24 января 2018, 11:56
                                                  Здравствуйте.
                                                  Можно ли наложить ограничения на задаваемый период, чтобы качестве начала периода можно было выбирать только любой понедельник, а для его окончания только любое воскресенье?
                                                  Те чтобы было можно задавать периоды типа:
                                                  ПН 22.01.2018 — ВС 28.01.2018 или ПН 22.01.2018 — ВС 04.02.2018
                                                  Можно ли задать минимальную длину периода?
                                                  1. Александр Мальцев
                                                    09 марта 2018, 12:12
                                                    Здравствуйте.
                                                    Не вижу проблем, но для этого придётся ещё написать эту логику на JavaScript.
                                                  2. Антон
                                                    07 декабря 2017, 14:02
                                                    При открытии календаря автоматически ставиться максимально возможная дата и срабатывает событие dp.change. Как сделать чтобы эта дата не ставилась?
                                                    1. Антон
                                                      07 декабря 2017, 14:17
                                                      пустое поле даты заполняется значением maxDate, как оставить пустое поле?
                                                      1. Vladimat
                                                        07 декабря 2017, 15:55
                                                        Установите параметр useCurrent со значением равным false.
                                                        1. Антон
                                                          11 декабря 2017, 08:22
                                                          Спасибо
                                                    2. Владислав
                                                      28 ноября 2017, 14:36
                                                      Здравствуйте Александр. Хотел использовать ваш компонент в проекте MVC на C#, но он никак не работает.
                                                      Вот подключаю скрипты в head:
                                                      @Styles.Render("~/Content/css")
                                                      @Styles.Render("~/Content/style.css")
                                                      @Styles.Render("~/Content/bootstrap-datetimepicker.css")
                                                      @Scripts.Render("~/Scripts/jquery-3.2.1.min.js")
                                                      @Scripts.Render("~/Scripts/moment-witn-locales.min.js")
                                                      @Scripts.Render("~/bundles/bootstrap")
                                                      @Scripts.Render("~/bundles/modernizr")
                                                      @Scripts.Render("~/Scripts/angular.js")
                                                      @Scripts.Render("~/Scripts/app.factory.js")
                                                      @Scripts.Render("~/Scripts/solo.table.js")
                                                      @Scripts.Render("~/Scripts/bootstrap-datetimepicker.min.js")
                                                      Вот вставляю объект в таблицу:
                                                      input type=«text» id=«datetimepicker1»
                                                      Это инициализация:

                                                      $(function () {
                                                      $('#datetimepicker1').datetimepicker({
                                                      locale: 'ru'
                                                      });
                                                      });

                                                      Работать никак не хочет. Помогите пожалуйста руки уже опускаются.
                                                      1. Александр Мальцев
                                                        09 марта 2018, 12:14
                                                        Добрый день. Не знаю, ASP.NET не использую.
                                                      2. Антон
                                                        24 ноября 2017, 09:30
                                                        Как уменьшить файл moment-with-locales.min.js оставить только русский? 300 кб как то многовато
                                                        1. Александр Мальцев
                                                          24 ноября 2017, 15:19
                                                          Тогда вместо файла moment-with-locales.min.js используйте:
                                                          • moment.min.js;
                                                          • ru.js (русскую локаль) — для уменьшения размера данный файл ещё необходимо минимизировать.
                                                          1. Антон
                                                            29 ноября 2017, 07:13
                                                            Спасибо попробую
                                                        2. Vladimat
                                                          08 ноября 2017, 10:45
                                                          Добрый день.
                                                          Демонстрация работы виджета не работает или это проблема на моей стороне?
                                                          1. Александр Мальцев
                                                            11 ноября 2017, 10:05
                                                            Добрый день.
                                                            На страничке ко всем примерам добавлены кнопочки «Скопировать» и «Запустить».
                                                            1. Vladimat
                                                              13 ноября 2017, 16:09
                                                              Спасибо.
                                                              Скачал пример и попробовал его повторить не на html-странице, а jsp-странице (для java). К сожалению, календарь не отображается, а выдает такую ошибку:
                                                              Uncaught TypeError: i.element.find(...).size is not a function
                                                              at k (bootstrap-datetimepicker.min.js:1)
                                                              at new d (bootstrap-datetimepicker.min.js:1)
                                                              at HTMLDivElement.(bootstrap-datetimepicker.min.js:1)
                                                              at Function.each (jquery-3.2.1.min.js:2)
                                                              at r.fn.init.each (jquery-3.2.1.min.js:2)
                                                              at r.fn.init.a.fn.datetimepicker (bootstrap-datetimepicker.min.js:1)
                                                              at HTMLDocument.((index):43)
                                                              at j (jquery-3.2.1.min.js:2)
                                                              at k (jquery-3.2.1.min.js:2)
                                                              Не могли бы подсказать, в чём может быть проблема? Файлы подключены в том же порядке, что и в примере. Взяты файлы (css и js) тоже из предоставленного примера.
                                                              1. Александр Мальцев
                                                                14 ноября 2017, 16:05
                                                                Функция size() является устаревшой и удалена из jQuery (1.8+, 3+), вместо неё нужно использовать свойство length.
                                                                1. Vladimat
                                                                  14 ноября 2017, 17:48
                                                                  У меня была другая проблема: надо было просто почистить кэш браузера. Просто сначала экспериментировал с jQuery 1.11.1 и datetimepicker более ранней версией, чем представлен в примере.
                                                                  Извините за беспокойство.
                                                          2. kostay
                                                            27 октября 2017, 17:12
                                                            Что то не могу подключить. подскажите плиз!
                                                            1. kostay
                                                              27 октября 2017, 17:28
                                                              вот что то ругаеться
                                                              (index):355 Uncaught TypeError: $(...).datetimepicker is not a function
                                                              at HTMLDocument.((index):355)
                                                              at i (jquery.min.js:2)
                                                              at Object.fireWith [as resolveWith] (jquery.min.js:2)
                                                              at Function.ready (jquery.min.js:2)
                                                              at HTMLDocument.K (jquery.min.js:2)
                                                              1. Александр Мальцев
                                                                30 октября 2017, 16:19
                                                                Вам необходимо подключить js-файл компонента datetimepicker после подключение jQuery.
                                                            2. Виталий
                                                              27 октября 2017, 10:21
                                                              Здравствуйте, Александр.
                                                              Можно ли определённый список дат выделить в календаре каким-нибудь цветом?
                                                              1. Александр Мальцев
                                                                30 октября 2017, 16:27
                                                                Здравствуйте. Это выполняется с помощью CSS.
                                                                Например:
                                                                $('.datepicker').find('[data-day="10/29/2017"]').css('background-color','yellow');
                                                                
                                                                1. Cfuf
                                                                  01 ноября 2017, 08:08
                                                                  Добрый день, не понятно какой тег имеет атрибут data-day? я вижу тег у конкретной даты только
                                                                  <td class="day">29</td>
                                                                  , еще подскажите как выделить промежуток между двумя датами. Спасибо
                                                                  1. Александр Мальцев
                                                                    05 ноября 2017, 04:57
                                                                    Добрый день.
                                                                    Не знаю, может у вас какой-то другой компонент.
                                                                    Вот скриншот.
                                                                    Выделение диапазона дат можно существить следующим образом:
                                                                    <script>
                                                                    $(function () {
                                                                        $('#datetimepicker1').datetimepicker({locale:'ru',debug: true})
                                                                            .on('dp.show dp.update', function(){
                                                                                // например с 06.11.2017 по 10.11.2017
                                                                                for (var d = new Date(2017, 10, 6); d <= new Date(2017, 10, 10); d.setDate(d.getDate() + 1)) {
                                                                                    $(this).find('[data-day="'+ d.toLocaleDateString() +'"]').css('background-color','yellow');
                                                                                }
                                                                            });
                                                                    });
                                                                    </script>
                                                                    Параметр debug со значением true можно использовать для отладки. На продакшене его конечно необходимо убрать.
                                                              2. Анатолий
                                                                27 октября 2017, 09:05
                                                                спасибо за урок
                                                                1. Nika
                                                                  10 октября 2017, 11:00
                                                                  Добрый день.
                                                                  А можно календарь не привязывать к input, а просто разместить на странице?
                                                                  1. Александр Мальцев
                                                                    18 октября 2017, 15:29
                                                                    Добрый день. Да. можно.
                                                                    <div style="overflow:hidden;">
                                                                        <div class="form-group">
                                                                            <div class="row">
                                                                                <div class="col-md-8">
                                                                                    <div id="datetimepicker"></div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <script>
                                                                            $(function () {
                                                                                $('#datetimepicker').datetimepicker({
                                                                                    inline: true,
                                                                                    sideBySide: true
                                                                                });
                                                                            });
                                                                        </script>
                                                                    </div>
                                                                    
                                                                    1. Nika
                                                                      19 октября 2017, 12:52
                                                                      Спасибо!
                                                                      А как в данном случае получить значение выбранной даты?
                                                                      1. Александр Мальцев
                                                                        19 октября 2017, 15:45
                                                                        Например, так:
                                                                        $('#datetimepicker').data('DateTimePicker').date().format('DD.MM.YYYY');
                                                                        
                                                                        1. Евгений
                                                                          04 августа 2018, 09:31
                                                                          Можете помочь, не могу вывести выбранную дату в input
                                                                          $(function () {
                                                                                $('#datetimepicker').datetimepicker({
                                                                          	    locale: 'ru',
                                                                          	    inline: true,
                                                                          	    sideBySide: false
                                                                          	  });	  
                                                                          	  var q = $('#datetimepicker').data('DateTimePicker').date().format('DD.MM.YYYY');
                                                                          	  $('#test').val(q);
                                                                          });
                                                                          1. Александр Мальцев
                                                                            04 августа 2018, 13:26
                                                                            А что не получается?
                                                                            Например, при изменении даты (ссылка на демку):
                                                                            $("#datetimepicker").on("dp.change", function (e) {
                                                                              var q = $('#datetimepicker').data('DateTimePicker').date().format('DD.MM.YYYY');
                                                                              $('#test').val(q);
                                                                            });
                                                                            1. Евгений
                                                                              04 августа 2018, 14:51
                                                                              Не сразу увидел
                                                                              .on("dp.change", function (e) 
                                                                              Еще подскажете может, как убрать выбор времени?
                                                                              1. Александр Мальцев
                                                                                04 августа 2018, 16:23
                                                                                Добавить параметр format:
                                                                                $('#datetimepicker').datetimepicker({
                                                                                  locale: 'ru',
                                                                                  inline: true,
                                                                                  sideBySide: false,
                                                                                  format: 'DD.MM.YYYY'
                                                                                });

                                                                          2. Nika
                                                                            19 октября 2017, 16:20
                                                                            Благодарю :)
                                                                    2. Александр
                                                                      18 сентября 2017, 16:39
                                                                      Крутой плагин, но, к сожалению, он не работает с jquery-3.1.0… Есть возможность их совместить, т.к на проекте используется именно эта версия?
                                                                      1. Александр Мальцев
                                                                        18 сентября 2017, 16:55
                                                                        Всё работает. Вот пример на jsfiddle. Здесь подключена библиотека jQuery 3.2.1.
                                                                        1. Александр
                                                                          19 сентября 2017, 08:35
                                                                          У меня, к сожалению, что при jquery-3.1.0, что при jQuery 3.2.1 ошибка: jQuery.Deferred exception: i.element.find(...).size is not a function TypeError: i.element.find(...).size is not a function, не знаю, в чем проблема
                                                                      2. Татьяна
                                                                        12 сентября 2017, 11:27
                                                                        Александр, добрый день! Очень полезный плагин у Вас! У меня возник один вопрос относительно него: как сделать так, чтобы можно было выбрать дату в рамках текущего месяца?
                                                                        Я искала в описании и комментария, но не нашла подобного решения. пробовала что-то сама «сварганить», но результата не принесло.
                                                                                      <script type="text/javascript">
                                                                                        $(function () {
                                                                                         var d = new Date();
                                                                                          var n = d.getMonth();
                                                                        
                                                                                          // Установка ограничения макс даты (не выше сегодняшнего дня)
                                                                                          $('#date_check').datetimepicker(
                                                                                            {pickTime: false, language: 'ru', maxDate: moment()}
                                                                                            );
                                                                                          
                                                                                          $("#date_check").on("dp.change",function () {
                                                                                          $("#date_check").data("DateTimePicker").setMinDate(n);
                                                                                         });
                                                                        
                                                                                        });
                                                                                      </script>
                                                                        
                                                                        заранее благодарю за потраченное время!
                                                                        1. Александр Мальцев
                                                                          14 сентября 2017, 15:36
                                                                          Добрый день, Татьяна!
                                                                          Для этого необходимо определить дату начала и окончания текущего месяца. Чтобы это выполнить можно использовать, например, moment.
                                                                          Код JavaScript:
                                                                          $(function () {
                                                                              var year = moment().get('year');
                                                                              var month = moment().get('month');
                                                                              var startDate = moment([year, month]);
                                                                              var endDate = moment(startDate).endOf('month');
                                                                              $('#date_check').datetimepicker({
                                                                                  format: 'DD.MM.YYYY',
                                                                          	locale: 'ru',
                                                                          	minDate: startDate,
                                                                          	maxDate: endDate
                                                                              });
                                                                          });
                                                                          
                                                                          Готовый пример доступен на jsfiddle: jsfiddle.net/itchief/7o8054L0/
                                                                          1. Татьяна
                                                                            18 сентября 2017, 10:27
                                                                            Благодарю за помощь!
                                                                        2. Вячеслав
                                                                          08 сентября 2017, 12:00
                                                                          Добрый день
                                                                          подскажите пожалуйста:
                                                                          — как сделать так что бы в input datetimepicker при загрузке страницы сразу отображалась текущяя дата
                                                                          использовал свойство showToday:true но оно gоказывает индикатор текущей даты в виджете
                                                                          в defaultDate не смог засунуть системную дату в формате (ДД-ММ-ГГГГ).

                                                                          — Как запретить ввод (выбор) даты которая больше текущей (сегодняшней)

                                                                          Спасибо огромное.
                                                                          1. Александр Мальцев
                                                                            14 сентября 2017, 15:42
                                                                            Добрый день, Вячеслав!
                                                                            Это делается так:
                                                                            $('#date_check').datetimepicker({
                                                                                format: 'DD-MM-YYYY',
                                                                                locale: 'ru',
                                                                                defaultDate: moment(),
                                                                                maxDate: moment()
                                                                            });
                                                                            
                                                                            Живой пример на jsfiddle.net: jsfiddle.net/itchief/vrk3n1az/
                                                                            1. Вячеслав
                                                                              14 сентября 2017, 17:31
                                                                              Спасибо огромное за ваш ответ.
                                                                              в Вопросе Татьяны увидел «maxDate: moment()» и заработало
                                                                              а с дефолтом не догадался как то((
                                                                              надо учить js
                                                                          2. Александр
                                                                            02 августа 2017, 12:47
                                                                            Добрый день.
                                                                            Никак не могу понять почему браузер ругается на function (вроде всё подключил правильно).
                                                                            Подскажите, пожалуйста.
                                                                            index.html:157 Uncaught ReferenceError: $ is not defined
                                                                            <section class="reservation">
                                                                            		<div class="container">
                                                                            			<div class="row">
                                                                            				<div class="col-md-12">
                                                                            					<h3>Online</h3>
                                                                            					<h2>Резервирование столов</h2>
                                                                            
                                                                            					<input type="text" class="form-control" id="datetimepicker1">	
                                                                            					
                                                                            				</div>
                                                                            			</div>
                                                                            		</div>
                                                                            	</section>
                                                                            
                                                                            	<script>
                                                                            	   $(function () {
                                                                            	      $('#datetimepicker1').datetimepicker(
                                                                            	          {language: 'ru'}
                                                                            	      );
                                                                            	  });
                                                                            	</script>
                                                                            1. Александр Мальцев
                                                                              02 августа 2017, 15:32
                                                                              Распологать скрипт на странице необходимо после подключения библиотеки jQuery и js-плагина DateTimePicker.
                                                                              1. andrey.n.vi6
                                                                                20 августа 2017, 15:37
                                                                                А поясните пожалуста что значит «после подключения библиотеки jQuery и js-плагина DateTimePicker. »? такая же проблема (jquery-3.1.0.min.js:2 Uncaught TypeError: jQuery(...).datetimepicker is not a function)
                                                                                1. Александр Мальцев
                                                                                  21 августа 2017, 16:23
                                                                                  Плагин DateTimePicker создан не на «чистом» JavaScript, он использует в своей работе функции jQuery. И если вы подключите bootstrap-datetimepicker.min.js до jquery-3.1.0.min.js, то он не будет работать, т.к. для его работы нужен jQuery, а его ещё нет. Т.е. последовательность подключения js файлов должна быть такая: jQuery -> DateTimePicker -> свои скрипты.
                                                                            2. Сергей
                                                                              29 июля 2017, 10:05
                                                                              приветствую!
                                                                              На моей странице datapicker конфликтует с модальным окном на бутстрапе. А именно мешает строчка
                                                                              <script type="text/javascript" src="../bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
                                                                              Из за этого модальное окно при открытии неактивно, да и вся остальная страница тоже. Помогает только перезагрузка страницы.
                                                                              не подскажите, как это можно исправить?
                                                                              1. Александр Мальцев
                                                                                29 июля 2017, 14:40
                                                                                Не знаю, скорее дело в чём-то другом.
                                                                                Собрал сборку, добавил datetimepicker как на страницу, как в модальное окно — всё отлично работает. Ссылка на сборку: yadi.sk/d/bWY9wIr73LXNK4
                                                                                1. Сергей
                                                                                  29 июля 2017, 15:42
                                                                                  Огромное спасибо! Очень своевременно и быстро ответили. Нашел в чем был косяк — в файле bootstrap.min.css, заменил его на ваш и все заработало.
                                                                              2. Сергей
                                                                                29 июля 2017, 09:37
                                                                                Привет!
                                                                                Александр, не подскажите ли, вот добавил модальное окно на свою страницу, а оно при открытии серое, как и остальная страница, ничего не активно. Помогает только перезагрузка страницы. Методом проб выяснил, что мешает
                                                                                <script type="text/javascript" src="../bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
                                                                                Удалять его не выход, перестает работать datapicker.
                                                                                Можете что нибудь посоветовать?
                                                                                1. ZverPro
                                                                                  25 июля 2017, 01:39
                                                                                  Здравствуйте, было задание у меня на работе, сделать выбор даты и чтобы при смене менялось содержимое на странице.
                                                                                  Всё сделал — всю документацию прочитал, подключил и установил, без использования bootstrap даже, чисто jQuery и moment.js.
                                                                                  И может, конечно, не понял что-то на английском, но является ли багом, что при выборе даты посредством клавиш — после нажатия enter или escape — перестают работать клавиши в календаре? На офф сайте в примерах такой же глюк. Просто может есть какое то решение? Подумываю просто как нибудь отключить эти две клавиши в календаре и сделать события при открытом календаре и нажатия на эти клавиши. Просто уже есть на странице кнопка, выполняющая роль закрытия/открытия календаря, и после её нажатия в календаре всё работает в плане клавиш. Использовал просто встроенные функции hide и show. В документации написано, что по дефолту escape и enter так же используют только hide и ничего больше, но вот почему после их нажатия перестает работать навигация клавиш — не понятно.

                                                                                  Надеюсь, что ответите — специально на сайте для этого зарегистрировался)
                                                                                  1. Александр Мальцев
                                                                                    25 июля 2017, 16:14
                                                                                    Чтобв это включить необходимо в исходном файле после 914 строки добавить:
                                                                                    keyState = {};
                                                                                    
                                                                                    Исправленный bootstrap-datetimepicker.js можете скачать по ссылке: yadi.sk/d/a_jkXWR43LPaj9
                                                                                    1. ZverPro
                                                                                      25 июля 2017, 17:04
                                                                                      А можно min версию? не хочется клиентов лишними 70кб загружать

                                                                                      И это значит всё-таки баг?
                                                                                      1. Александр Мальцев
                                                                                        25 июля 2017, 17:18
                                                                                        Не знаю, может какая-та особенность плагина.
                                                                                        Архив обновил, добавил туда минифицированную версию.
                                                                                  2. Cyberjo
                                                                                    21 июля 2017, 23:17
                                                                                    Что то почитал документацию, а там не написано…
                                                                                    Как задать текущую дату по умолчанию( defaultDate: ?), и что бы «вчерашние числа» выбрать было не возможно?)
                                                                                    1. Александр Мальцев
                                                                                      25 июля 2017, 16:20
                                                                                      Можно так:
                                                                                      $('#datetimepicker1').datetimepicker({
                                                                                        locale: 'ru',
                                                                                        minDate: new Date()
                                                                                      });
                                                                                      Или с помощью moment:
                                                                                      $('#datetimepicker1').datetimepicker({
                                                                                        locale: 'ru',
                                                                                        minDate: moment()
                                                                                      });
                                                                                      1. Cyberjo
                                                                                        25 июля 2017, 23:17
                                                                                        Да, это именно то чего не хватало, спасибо большое Александр!
                                                                                      2. ZverPro
                                                                                        25 июля 2017, 01:50
                                                                                        там же все есть в документации. Вы же используете moment.js, она как раз для подобных задач нужна.
                                                                                        //создаете переменную 
                                                                                        now=moment();
                                                                                        //обнуляете сутки
                                                                                        now.minute(0);
                                                                                        now.second(0);
                                                                                        now.millisecond(0);
                                                                                        //и вот опции для календаря
                                                                                        //Текущая дата - 
                                                                                        defaultDate: now,
                                                                                        //вчерашние нельзя - 
                                                                                        minDate: now
                                                                                        
                                                                                        Только проверьте, я сам этот календарь изучаю второй день, а момент.js неделю где-то.
                                                                                      3. Cyberjo
                                                                                        15 июля 2017, 02:34
                                                                                        А с датой в Хроме, вот такая беда, ничего не ввести и при выборе в календаре любой даты она не помещается в инпут.



                                                                                        upd:
                                                                                        В общем понял… ждать обновления! :)
                                                                                        1. Cyberjo
                                                                                          21 июля 2017, 19:50
                                                                                          Оказалось достаточным убрать в type=time/date и поставить text, тогда будет работать и в хром.
                                                                                          1. Александр Мальцев
                                                                                            25 июля 2017, 16:32
                                                                                            Да, необходимо использовать type со значением text. Иначе, если установить type с date или time, браузер будет использовать собственные виджеты, а в данном случае это не нужно, т.к. для его отрисовки используется bootstrap-datetimepicker.
                                                                                        2. Cyberjo
                                                                                          13 июля 2017, 21:10
                                                                                          :(
                                                                                          Что то ни как… Инпут + иконку выводит, а вот календаря — нет.
                                                                                          <!DOCTYPE html>
                                                                                          <html>
                                                                                          <head>
                                                                                              <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
                                                                                              <title>name</title>
                                                                                              <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
                                                                                              <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.css"/>
                                                                                              <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap-theme.css"/>
                                                                                              <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css"/>
                                                                                          
                                                                                              <!-- <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> -->
                                                                                          
                                                                                              <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
                                                                                              <script type="text/javascript" src="js/moment-with-locales.min.js"></script>
                                                                                              <script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
                                                                                              <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
                                                                                          
                                                                                          </head>
                                                                                          <body>
                                                                                          <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>
                                                                                          
                                                                                          </body>
                                                                                          </html>
                                                                                          
                                                                                          1. Cyberjo
                                                                                            13 июля 2017, 22:04
                                                                                            Видимо работает только со старой библиотекой jquery 1.11.1, пичалька.
                                                                                            1. Cyberjo
                                                                                              14 июля 2017, 01:32
                                                                                              Для пробы подключил с двумя библиотеками jquery( знаю что нельзя ). В прикрепленной выше ссылке moment-with-locales.min.js (архив moment.zip) — троян и чот ещё, три срабатывания, virustotal.


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

                                                                                              Вопрос как запретить в инпутах ввод даты и времени, ручками?
                                                                                              И как поставить интервал с 11:00 — 23:00, приведенный пример ниже, чот не работает. Выбор начинается с 01:18 и разрешает всё.
                                                                                                  $(function () {
                                                                                                      $('#time').datetimepicker(
                                                                                                          {
                                                                                                              pickDate: false, language: 'ru',
                                                                                                              disabledTimeIntervals: [
                                                                                                                  [moment().hour(0).minutes(0), moment().hour(11).minutes(0)],
                                                                                                                  [moment().hour(23).minutes(0), moment().hour(24).minutes(0)]
                                                                                                              ]
                                                                                                          });
                                                                                                  });
                                                                                              
                                                                                              1. Александр Мальцев
                                                                                                14 июля 2017, 04:38
                                                                                                На вкладке «Сведения о файле» все файлы чистые. Файл является архивом, что ему там не понравилось не знаю. Переместил файлы в папку, теперь наверно K7 понравится…
                                                                                                1. Cyberjo
                                                                                                  14 июля 2017, 05:29
                                                                                                  Александр так а как поставить фиксированный интервал выбора времени с 11:00 — 23:00?
                                                                                                  Проверил на новом Хроме, невозможно выбрать дату. Выпадает календарь, а выбрать не дает :(
                                                                                                  Будет ли обновлен этот урок?
                                                                                                  1. Александр Мальцев
                                                                                                    14 июля 2017, 06:12
                                                                                                    Параметра pickDate в последней версии плагина Datepicker нет.
                                                                                                    Необходимо написать так:
                                                                                                    $(function () {
                                                                                                      $('#time').datetimepicker({
                                                                                                        locale: 'ru',
                                                                                                        format: 'HH:mm',
                                                                                                        disabledTimeIntervals: [
                                                                                                          [ moment().hour(0).minutes(0), moment().hour(11).minutes(0) ],
                                                                                                          [ moment().hour(23).minutes(0), moment().hour(24).minutes(0) ] 
                                                                                                        ]
                                                                                                      });
                                                                                                    });
                                                                                                    
                                                                                                    Да, есть в планах переработать эту статью.
                                                                                                    1. Cyberjo
                                                                                                      15 июля 2017, 01:54
                                                                                                      Приведенный вами вариант с заданным промежутком так же не работает у меня. Кроме того появилась дата а мне необходимо было только время. Возможно это проблема двух библиотек… или устаревших файлов. Жаль, но что поделать придется и тут следить за обновлением.
                                                                                          2. gmail
                                                                                            09 июля 2017, 17:56
                                                                                            Добрый день! Подскажите каким образом и с помощью чего можно создать элемент позволяющий пользователю мышкой увеличивать (растягивать) синюю полосу до нужного (произвольного) размера/длинны этой самой полосы, чтобы потом, при отпускании мышки полоса сохраняла свою новую, установленную пользователем, длину? (пример на картинке) Спасибо. <img src="" />
                                                                                            1. Meri
                                                                                              12 июня 2017, 23:43
                                                                                              Здравствуйте!!! Подскажите, пожалуйста, почему у меня некорректно отображается?
                                                                                              Скриншот: gyazo.com/f7d94b85541631828ada1b1867cb7bbd

                                                                                              Ссылка на сайт:beldom62.ru
                                                                                              Всплывающая форма в шапке — под номером телефона.
                                                                                              Помогите, пожалуйста.
                                                                                              1. Света
                                                                                                09 июня 2017, 10:57
                                                                                                Здравствуйте, подскажите как с помощью bootstrap сделать вот такие штуки:

                                                                                                здесь выводиться ближайшие 7 дней без выходных (суббота, воскресенье).

                                                                                                здесь выводится текущее время время до 21 с интервалом 15 мин.
                                                                                                1. Александр Мальцев
                                                                                                  09 июня 2017, 16:51
                                                                                                  Вывод времени в элемент select с определённым интервалом реализовать так.
                                                                                                  HTML код:
                                                                                                  <select class="times" class="form-control" name="times">
                                                                                                  </select>
                                                                                                  
                                                                                                  JavaScript сценарий:
                                                                                                  $(function(){
                                                                                                    // текущая дата
                                                                                                    var currentDate = new Date();
                                                                                                    // получаем минуты
                                                                                                    var minutes = currentDate.getMinutes();
                                                                                                    // устанавливаем ближейшее время, кратное 15 минут
                                                                                                    var interval = [45, 30, 15, 0];
                                                                                                    for (var i=0; i<interval.length; i++) {
                                                                                                      if (minutes > interval[i]) {
                                                                                                        if (interval[i] == 45) {
                                                                                                          currentDate.setHours(currentDate.getHours()+1);
                                                                                                          currentDate.setMinutes(0);
                                                                                                        } else {
                                                                                                          currentDate.setMinutes(interval[i-1]);
                                                                                                        }
                                                                                                        break;
                                                                                                      } 
                                                                                                    }
                                                                                                  
                                                                                                    // массив текущего времени
                                                                                                    var arrayTimes = [];
                                                                                                    // масимальная дата
                                                                                                    var maxDate = new Date(currentDate.getTime());
                                                                                                    maxDate.setHours(21,00);
                                                                                                    // формируем массив
                                                                                                    while (currentDate<=maxDate) {
                                                                                                      var hours0 = currentDate.getHours();
                                                                                                      var minutes0 = currentDate.getMinutes();
                                                                                                      if (hours0<10) {
                                                                                                        hours0='0'+hours0;  
                                                                                                      }
                                                                                                      if (minutes0<10) {
                                                                                                        minutes0='0'+minutes0;  
                                                                                                      }
                                                                                                      arrayTimes.push(hours0+':'+minutes0);
                                                                                                      currentDate.setMinutes(currentDate.getMinutes()+15);  
                                                                                                    }
                                                                                                    // выводим массив в элемент с классом times
                                                                                                    var output = '<option selected></option>';
                                                                                                    for (var i=0; i<arrayTimes.length; i++) {
                                                                                                      output += '<option>' + arrayTimes[i] + '</option>';
                                                                                                    }
                                                                                                    $('.times').empty().html(output);
                                                                                                  });
                                                                                                  
                                                                                                  1. Александр Мальцев
                                                                                                    09 июня 2017, 16:49
                                                                                                    Тут бутстрап не причём. Нужно писать логику на JavaScript.
                                                                                                    Например, элемент в который будем выводить нужные даты:
                                                                                                    <select class="dates" class="form-control" name="dates">
                                                                                                    </select>  
                                                                                                    
                                                                                                    Скрипт JavaScript:
                                                                                                    $(function(){
                                                                                                      // функция для форматирования даты
                                                                                                      var formatDate = function(date) {
                                                                                                        var output = [];
                                                                                                        var days = ['Вск', 'Пнд', 'Втр', 'Срд', 'Чтв', 'Птн', 'Сбб'];
                                                                                                        var month = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Ноябрь','Декабрь'];
                                                                                                        var date0 = date.getDate();
                                                                                                        if (date0<10) {
                                                                                                          date0='0'+date0;  
                                                                                                        }
                                                                                                        output.push(days[date.getDay()]);
                                                                                                        output.push(date0);
                                                                                                        output.push(month[date.getMonth()]);
                                                                                                        return output.join(' ');  
                                                                                                      };
                                                                                                    
                                                                                                      // массив ближайших дат
                                                                                                      var arrayDates = [];
                                                                                                      // количество дней
                                                                                                      var countDays = 7;
                                                                                                      // текущая дата
                                                                                                      var currentDate = new Date();
                                                                                                    
                                                                                                      // формируем массив
                                                                                                      var i = 0, day = currentDate;  
                                                                                                      while (i<countDays) {
                                                                                                        if (day.getDay()==0 || day.getDay()==6) {
                                                                                                          day.setDate(day.getDate()+1);  
                                                                                                          continue;
                                                                                                        }
                                                                                                        arrayDates[i] = formatDate(day);
                                                                                                        day.setDate(day.getDate()+1); 
                                                                                                        i++;
                                                                                                      }
                                                                                                      // выводим массив в элемент с классом dates
                                                                                                      var output = '<option selected>Выберите дату</option>';
                                                                                                      for (var i=0; i<arrayDates.length; i++) {
                                                                                                        output += '<option>' + arrayDates[i] + '</option>';
                                                                                                      }
                                                                                                      $('.dates').empty().html(output);
                                                                                                    });
                                                                                                    
                                                                                                    1. Света
                                                                                                      09 июня 2017, 18:16
                                                                                                      Ого, спасибо большое. Очень благодарна))))
                                                                                                  2. Анна
                                                                                                    08 июня 2017, 11:36
                                                                                                    Здравствуйте! Использую Bootstrap datetimepicker, подскажите, пожалуйста, как запретить вывод клавиатуры на мобильном устройстве при выборе даты?
                                                                                                    1. Александр Мальцев
                                                                                                      09 июня 2017, 17:00
                                                                                                      Можно добавить к элементу input атрибут readonly:
                                                                                                      <input type="text" class="datepicker" readonly="readonly">
                                                                                                      
                                                                                                    2. Igor
                                                                                                      12 мая 2017, 15:01
                                                                                                      В плагине есть такое свойство как keyboardNavigation вот ссылка bootstrap-datepicker.readthedocs.io/en/latest/options.html#keyboardnavigation но оно почему то не работает когда открывается календарь все равно можно переключать стрелками. Автор хелп)
                                                                                                      1. Александр Мальцев
                                                                                                        13 мая 2017, 05:55
                                                                                                        Данное свойство работает корректно. Вот пример: jsfiddle.net/itchief/w04v8qhb/
                                                                                                      2. Igor
                                                                                                        24 апреля 2017, 18:15
                                                                                                        Как сделать возможность выбора времени только с 11 утра по 19 вечера?
                                                                                                        1. Александр Мальцев
                                                                                                          25 апреля 2017, 05:00
                                                                                                          Использовать параметр disabledTimeIntervals.
                                                                                                          Например:
                                                                                                          $('#datetimepicker1').datetimepicker({
                                                                                                            locale: 'ru',
                                                                                                            disabledTimeIntervals: [
                                                                                                              [ moment().hour(0).minutes(0), moment().hour(11).minutes(0) ],
                                                                                                              [ moment().hour(19).minutes(0), moment().hour(24).minutes(0) ] 
                                                                                                            ]
                                                                                                          });
                                                                                                          
                                                                                                          1. Igor
                                                                                                            25 апреля 2017, 11:08
                                                                                                            А если человек заходит на сайт с другой Timezone?
                                                                                                            1. Александр Мальцев
                                                                                                              26 апреля 2017, 02:35
                                                                                                              То тогда это необходимо оговаривать и доставлять в скрипт уже вычисленные значения.
                                                                                                              Начать вычислять можно так:
                                                                                                              // получить Timezone
                                                                                                              var timeZone = new Date().getTimezoneOffset();
                                                                                                              // получить часы Timezone
                                                                                                              var current_h = Math.floor(x/60);
                                                                                                              // получить минуты Timezone
                                                                                                              var current_m = timeZone - current_h*60;
                                                                                                              
                                                                                                              После этого вычислить время, если Timezone пользователя отличается от базовой, и подставить их в конструкцию инициализации datetimepicker.
                                                                                                            2. Igor
                                                                                                              25 апреля 2017, 10:40
                                                                                                              спасибо))
                                                                                                          2. Алексей
                                                                                                            12 апреля 2017, 09:53
                                                                                                            Привет, почему может быть такая проблема. Когда скроллю страницу, календарь уползает со своего певоначального места. Как зафиксировать положение?
                                                                                                            1. Александр Мальцев
                                                                                                              12 апреля 2017, 12:55
                                                                                                              Скорее всего, неправильно задано позиционирование элемента. Т.е. календарь использует абсолютное позиционирование, но не относительно элемента, посредством которого вы его вызываете.
                                                                                                              1. Алексей
                                                                                                                12 апреля 2017, 13:25
                                                                                                                Я пробовал изменить parentEl с 'body' на другой, не вышло.
                                                                                                                1. Александр Мальцев
                                                                                                                  12 апреля 2017, 15:48
                                                                                                                  По картинке что-то сложно подсказать. Элемент (1), который должен быть абсолютно с позиционирован относительно другого элемента(2), должен быть расположен в нём. Родительский элемент (2) должен иметь относительное позиционирование.
                                                                                                            2. Сергей
                                                                                                              06 апреля 2017, 16:35
                                                                                                              Александр Здравствуйте подскажите пожалуйста, пользуюсь datetimepicker

                                                                                                              Я в поле Дата ручками ввожу дату в формате: 2017-03
                                                                                                              щелкаю в пустой области сайта, а поле само дописывает 2017-03-01
                                                                                                              Как избавится от дописывания ????????



                                                                                                              1. Александр Мальцев
                                                                                                                07 апреля 2017, 16:44
                                                                                                                Используйте параметр useStrict со значением true:
                                                                                                                $(function () {
                                                                                                                  $('#datetimepicker1').datetimepicker({
                                                                                                                    locale: 'ru',
                                                                                                                    useStrict: true
                                                                                                                  });
                                                                                                                });
                                                                                                                
                                                                                                                1. Сергей
                                                                                                                  07 апреля 2017, 19:57
                                                                                                                  Спасибо вам огромное это именно то что нужно, дай бог вам здоровья счастья и много денег )))
                                                                                                              2. Владимир
                                                                                                                06 апреля 2017, 16:20
                                                                                                                Александр, добрый день!
                                                                                                                Есть два поля, к которым подключен плагин. Это дата начала и дата окончания события.
                                                                                                                Подскажите пожалуйста, возможно ли сделать так, чтобы выбрав дату начала события, такая же устанавливалась и на дату окончания события? Но если событие НЕ однодневное, то можно было спокойно поставить дату окончания какую угодно
                                                                                                                1. Александр Мальцев
                                                                                                                  08 апреля 2017, 04:06
                                                                                                                  Здравстствуйте, Владимир.
                                                                                                                  Будет так:
                                                                                                                  // инициализация DateTimePicker
                                                                                                                  $('#datetimepicker1').datetimepicker({
                                                                                                                    locale: 'ru',
                                                                                                                    format: 'DD.MM.YYYY'
                                                                                                                  });
                                                                                                                  $('#datetimepicker2').datetimepicker({
                                                                                                                    locale: 'ru',
                                                                                                                    format: 'DD.MM.YYYY'
                                                                                                                  });
                                                                                                                  
                                                                                                                  // при изменении 1 даты
                                                                                                                  $("#datetimepicker1").on("dp.change", function (e) {
                                                                                                                    // устанавливаем 2 дату
                                                                                                                    $('#datetimepicker2').data('DateTimePicker').date($(this).data('DateTimePicker').date().format('DD.MM.YYYY'));
                                                                                                                    // и минимальное значение 2 даты
                                                                                                                    $('#datetimepicker2').data("DateTimePicker").minDate($(this).data('DateTimePicker').date().format('DD.MM.YYYY'));
                                                                                                                  });
                                                                                                                  
                                                                                                                  1. Владимир
                                                                                                                    08 апреля 2017, 10:44
                                                                                                                    Александр, спасибо за ответ!
                                                                                                                    Но в консоли получаю следующее
                                                                                                                    Uncaught TypeError: $(...).data(...).date is not a function
                                                                                                                    1. Александр Мальцев
                                                                                                                      08 апреля 2017, 10:52
                                                                                                                      Код JavaScript необходимо обернуть в элемент script и вставить после подключения jQuery и js-плагина DateTimePicker.
                                                                                                                      1. Владимир
                                                                                                                        08 апреля 2017, 23:08
                                                                                                                        Без этого никуда)
                                                                                                                        С виджетом версии 3.1.3 ваш код отказывался работать.
                                                                                                                        Обновил до 4.17.37 и заработало.
                                                                                                                        Еще раз благодарю!!!
                                                                                                                2. Alisa
                                                                                                                  25 марта 2017, 12:17
                                                                                                                  Здравствуйте. Подскажите, пожалуйста, в чем может быть проблема, если при использовании DateTimePicker в одностраничном приложении, написанного с помощью AngularJS, при переходе на страницу, где есть поле с календарем, календарь перестает вываливаться при нажатии на поле или кнопку. Если делать все на одной странице, все работает.
                                                                                                                  1. Василий
                                                                                                                    07 марта 2017, 11:38
                                                                                                                    Эх, как ни пробовал подключать, так и не заработало…
                                                                                                                    Версии bootstrap менял, jquery менял, календарь не захотел выпадать, к сожалению
                                                                                                                    1. Александр Мальцев
                                                                                                                      07 марта 2017, 18:01
                                                                                                                      Попробуйте проверить последовательность подключения js файлов и сценария, в котором происходит инициализация элемента. Сценарий должен располагаться после подключения этих файлов.
                                                                                                                    2. Николай
                                                                                                                      03 марта 2017, 17:22
                                                                                                                      Огромное спасибо автору за его труд. все вопросы связанные с бутстрапом решаю 90% здесь.
                                                                                                                      Есть вопрос по сабжу:
                                                                                                                      у меня выведен такой вариант с выбором промежутка yadi.sk/i/4iyC5ocI3ExLbC. при клике, появляется либо первый календарь, либо второй, но мне необходимо реализовать такой функционал yadi.sk/i/Y_JWGJm53ExLrK, возможно ли это средствами datetimepicker.js + moment.js?
                                                                                                                      Заранее благодарен за ответ!!!

                                                                                                                      1. Александр Мальцев
                                                                                                                        07 марта 2017, 17:53
                                                                                                                        В версии 4 такой функционал данный компонент не поддерживает. Эта возможность запланировано автором только в 5 версии.
                                                                                                                        1. Николай
                                                                                                                          04 марта 2017, 00:32
                                                                                                                          Собственно нашёл ответ на вопрос, тем кто использует в связке с datepicker ui + moment для решения этой задачи необходимо глянуть на этот плагин, который позволяет делать именно временные интервалы, а для тех у кого чистый datepicker посоветую глянуть в сторону этой статьи.
                                                                                                                        2. Алексей
                                                                                                                          29 января 2017, 21:14
                                                                                                                          Сорри, разобрался) У меня была подключена другая версия bootstrap через линк maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css и видимо между ними конфликт. Удалил это подключение и все заработало. Автору спасибо :)
                                                                                                                          1. Алексей
                                                                                                                            29 января 2017, 19:40
                                                                                                                            Все сделал как написано в статье, подключил все скрипты и css. Визуально блок появился, но скрипт не работает, т.е. не открывается календарик. Скрипт этот еще поддерживается?) Или что я не так сделал?
                                                                                                                            1. gearmobile
                                                                                                                              31 декабря 2016, 21:05
                                                                                                                              пардон — про locale не заметил, почитал комменты ))
                                                                                                                              1. gearmobile
                                                                                                                                31 декабря 2016, 20:56
                                                                                                                                немного разобрался с плагином datetimepicker. вроде даже понравился )) документация хорошая. кстати, у Вас в статье один момент устарел — не language, а locale для вывода локального календаря.

                                                                                                                                вот с чем не разобрался, так это — как заставить календарь закрываться при выборе даты? в datepicker это из коробки есть, здесь же это наверняка настраивается — я смотрел функции и события плагина datetimepicker, но не осилил ))

                                                                                                                                вдруг этот вопрос уже затрагивался в комментариях — приношу свои извинения. комменты очень длинные )))
                                                                                                                                1. gearmobile
                                                                                                                                  31 декабря 2016, 18:20
                                                                                                                                  Все из-за дополнительных возможностей плагина moment.js? )

                                                                                                                                  Исправлю самого себя — никакого хвоста нет. Только дополнительный плагин moment.js )

                                                                                                                                  Но вопрос остался открытым — почему именно bootstrap-datetimepicker?
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    04 января 2017, 13:26
                                                                                                                                    Со временем дополню эту статью (внесу информацию по плагину datepicker для Bootstrap).
                                                                                                                                  2. gearmobile
                                                                                                                                    31 декабря 2016, 18:06
                                                                                                                                    конечно, Вы автор и Вам выбирать, какой плагин описывать.
                                                                                                                                    Но почему не был взят вот этот — github.com/uxsolutions/bootstrap-datepicker?
                                                                                                                                    На GitHub этот плагин собрал максимальное число stars )

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

                                                                                                                                    <link rel="stylesheet" href="css/bootstrap-datepicker.min.css">
                                                                                                                                    <script src="js/bootstrap-datepicker.min.js"></script>
                                                                                                                                    
                                                                                                                                    Попутно хочу выразить автору свое уважение в плане поддержки сайта — нигде я еще не видел, чтобы автор так много, подробно отвечал на вопросы. Буквально под каждой статьей целая лента комментариев. ))
                                                                                                                                    1. Donch
                                                                                                                                      13 ноября 2016, 10:45
                                                                                                                                      Здравствуйте, Александр!
                                                                                                                                      Спасибо за прекрасную работу!
                                                                                                                                      Естественно, хочется отправлять введенную дату на сервер. Предполагается, что отправка будет реализована с помощью кнопки 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. Александр Мальцев
                                                                                                                                        13 ноября 2016, 12:23
                                                                                                                                        Здравствуйте. Данные передаются на сервер в текстовом формате. Их можно посылать методом POST или GET. Метод POST применяется тогда, когда эти данные необходимо добавить в базу. Когда на основании этих данных необходимо выбрать другую информацию (т.е. информация не попадает в базу) используется метод GET.
                                                                                                                                        Можно, например, в формате ISO:
                                                                                                                                        $('#datetimepicker1').data("DateTimePicker").date()._d.toISOString()
                                                                                                                                        
                                                                                                                                      2. Anastasia
                                                                                                                                        25 октября 2016, 19:42
                                                                                                                                        Здравствуйте, Александр.
                                                                                                                                        Подскажите пожалуйста, как мне сделать так, чтобы при выборе диапазона дат, ниже появлялась таблица. определенная таблица к определенной дате.
                                                                                                                                        1. Александр Мальцев
                                                                                                                                          26 октября 2016, 12:20
                                                                                                                                          Вам необходимо при изменении даты, получить их значения. После этого в зависимости от некотрых условий выводить определённую таблицу:
                                                                                                                                          $("#datetimepicker1").on("dp.change", function (e) {
                                                                                                                                            // получить значение даты 1
                                                                                                                                            var date1 = $('#datetimepicker1 input').val();
                                                                                                                                            // получить значение даты 2
                                                                                                                                            var date2 = $('#datetimepicker2 input').val();
                                                                                                                                            // условия, на основании которых будет выводиться определённая таблица
                                                                                                                                            // if ...
                                                                                                                                          });
                                                                                                                                          
                                                                                                                                          1. Anastasia
                                                                                                                                            26 октября 2016, 12:48
                                                                                                                                            т.е. мне условие того что выведется при выборе даты писать в .val(' ')? или куда это писать?
                                                                                                                                            1. Александр Мальцев
                                                                                                                                              27 октября 2016, 13:32
                                                                                                                                              Здесь можно только догадываться… Получить выбранную дату из поля input с datetimepicker можно использую следующую строчку:
                                                                                                                                              var date1 = $('#datetimepicker1 input').val(); //какая-то дата в переменной date1
                                                                                                                                              
                                                                                                                                              Вторую дату получаем аналогично (переменная date2). Дальше вам необходимо написать какой-то алгоритм. Например, вычесть одну дату из другой, или что-то ещё для того чтобы получить какой-то диапазон. Далее не совсем понятно…
                                                                                                                                              Отобразить таблицу можно используя методы jQuery show. Для скрытия таблицы можно использовать метод hide.
                                                                                                                                        2. Виталий
                                                                                                                                          08 октября 2016, 22:28
                                                                                                                                          Скажите пожалуйста, как отключить выбор столетий?
                                                                                                                                          1. Александр Мальцев
                                                                                                                                            10 октября 2016, 13:23
                                                                                                                                            Добавьте в CSS следующие стили:
                                                                                                                                            .bootstrap-datetimepicker-widget .datepicker-years thead .picker-switch {
                                                                                                                                              cursor: default;
                                                                                                                                              pointer-events: none;
                                                                                                                                            }
                                                                                                                                            
                                                                                                                                            1. Виталий
                                                                                                                                              14 октября 2016, 19:59
                                                                                                                                              Александр, вы навеняка подключали данный плагин к каким-то cms, подскажите, в чем может быть проблема: у меня везде в шаблонах плагин работает нормально, а вот если добавляю дополнительное поле(дата) через функцию добавления доп. полей-календарь не открывается вообще.
                                                                                                                                              1. Александр Мальцев
                                                                                                                                                16 октября 2016, 09:01
                                                                                                                                                Обычно посредством подключения файлов js и css Bootstrap DateTimePicker к странице. В CMS MODX делается так, но может в других системах есть какие-то особенности…
                                                                                                                                                1. Виталий
                                                                                                                                                  16 октября 2016, 13:07
                                                                                                                                                  Посмотрите, может вы поймете, что не так…
                                                                                                                                                  Функция выбора даты
                                                                                                                                                  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. Александр Мальцев
                                                                                                                                                    18 октября 2016, 13:15
                                                                                                                                                    Не знаю, может он не активируется. Попробуйте проверить, есть ли ошибки в консоли браузера.
                                                                                                                                                    1. Виталий
                                                                                                                                                      18 октября 2016, 16:03
                                                                                                                                                      Нет ошибок. У меня исходный календарь работает только с onlclick="" в input, может и для данного календаря можно как то использовать onclick=«блабла»?
                                                                                                                                                      1. Виталий
                                                                                                                                                        19 октября 2016, 12:13
                                                                                                                                                        Все, вопрос решил, теперь все работает, спасибо за помощь!
                                                                                                                                          2. Виталий
                                                                                                                                            05 октября 2016, 23:04
                                                                                                                                            Подскажите, в чем может быть проблема? Добавляю в 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. Александр Мальцев
                                                                                                                                              06 октября 2016, 11:28
                                                                                                                                              Попробуйте обновить компонент DateTimePicker и moment до последней версии.
                                                                                                                                              1. Виталий
                                                                                                                                                06 октября 2016, 17:58
                                                                                                                                                Вопрос закрыт, конфликт был с
                                                                                                                                                $(function () {
                                                                                                                                                //код
                                                                                                                                                });
                                                                                                                                                заменил на
                                                                                                                                                (function () {
                                                                                                                                                //код
                                                                                                                                                })();
                                                                                                                                                теперь все работает
                                                                                                                                            2. Виталий
                                                                                                                                              04 октября 2016, 18:22
                                                                                                                                              А где в самих исходниках изменить язык на русский и формат на YYYY-MM-DD, чтобы не писать их каждый раз для каждого id?
                                                                                                                                              1. Александр Мальцев
                                                                                                                                                05 октября 2016, 09:55
                                                                                                                                                Это делается не так. Вам всё равно придётся инициализировать каждый элемент.
                                                                                                                                                Если Вам необходимо это сделать для некоторой группы, то присвойте не id, а определённый класс (например, dtp) необходимым datetimepicker.
                                                                                                                                                $(function () {
                                                                                                                                                  // будут инициализированы все элементы, имеющие класс dtp
                                                                                                                                                  $('.dtp').datetimepicker({
                                                                                                                                                    locale: 'ru',
                                                                                                                                                    format: 'DD.MM.YYYY',
                                                                                                                                                    useCurrent: false
                                                                                                                                                  });
                                                                                                                                                });
                                                                                                                                                
                                                                                                                                                1. Виталий
                                                                                                                                                  05 октября 2016, 11:08
                                                                                                                                                  Язык я нашол где сменить, это файл moment-with-locales.min.js(locale(«en») изменил на ru), хотелось бы все же и формат даты изменить с того, что по умолчанию, на свой — YYYY-MM-DD, других у меня на сайте нет, а что id прописывать, что класс — от перемены мест слагаемых…
                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                    05 октября 2016, 11:45
                                                                                                                                                    Она устанавливается в файле bootstrap-datetimepicker.js (в свойстве format):
                                                                                                                                                    ...
                                                                                                                                                    $.fn.datetimepicker.defaults = {
                                                                                                                                                      timeZone: '',
                                                                                                                                                      format: 'YYYY-MM-DD',
                                                                                                                                                    ...
                                                                                                                                                    
                                                                                                                                                    1. Виталий
                                                                                                                                                      05 октября 2016, 12:26
                                                                                                                                                      Спасибо, все получилось.
                                                                                                                                              2. Виталий
                                                                                                                                                04 октября 2016, 18:14
                                                                                                                                                Есть выбор периода обновления, 2 поля с датами с-по, соответственно начиная с завтрашней даты обновления быть не может в принципе, как ограничить выбор даты после текущей, тоесть завтрашняя и последующие даты были неактивными?
                                                                                                                                                1. Александр Мальцев
                                                                                                                                                  05 октября 2016, 10:46
                                                                                                                                                  Будет так.
                                                                                                                                                  Код 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. Виталий
                                                                                                                                                    05 октября 2016, 12:57
                                                                                                                                                    Работает, только текущая(сегодняшняя) дата как и все последующие так-же не активна, а она желательно должна быть активной.
                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                      05 октября 2016, 15:05
                                                                                                                                                      Так же вы хотели ограничить выбор даты после текущей. Дата вычисляется согласно часовому поясу, установленному на компьютере. Чтобы datetimepicker лучше отрабатывал, попробуйте убрать параметр useCurrent: false.
                                                                                                                                                      1. Виталий
                                                                                                                                                        05 октября 2016, 15:34
                                                                                                                                                        Все правильно, так и хотел, но без ограничения текущей даты, если убрать useCurrent — работает, но дата вставляется автоматом при открытии календаря, это не подходит…
                                                                                                                                                        Еще такой момент, если выберу дату например 5, 10, 20 дней назад, а потом текущую-тогда она выбирается.
                                                                                                                                                        В другом варианте у меня есть ограничение до текущей даты, указал minDate: new Date() и текущая дата выбирается, по идее и в maxDate: new Date() она должна выбираться… возможно в самом коде календаря что-то не так…
                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                          06 октября 2016, 11:26
                                                                                                                                                          Это ошибки в работе самого компонента, попробуйте поставить последнюю версию.
                                                                                                                                                          1. Виталий
                                                                                                                                                            06 октября 2016, 17:01
                                                                                                                                                            Да самая последняя и стоит.
                                                                                                                                                            1. Виталий
                                                                                                                                                              09 октября 2016, 00:02
                                                                                                                                                              Может можно написать как-то типа maxDate: блабла +1?
                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                10 октября 2016, 13:11
                                                                                                                                                                Попробуйте убрать 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. Виталий
                                                                                                                                                  04 октября 2016, 18:04
                                                                                                                                                  Спасибо Александр. А как поменять цвет для иконок «выбрать время», «удалить», «закрыть»(внизу календаря)… по умолчанию они синие и в css файле стилей для них нет.
                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                    05 октября 2016, 09:31
                                                                                                                                                    Как обычно. Тут ни какой документации нет, необходимо знать только css.
                                                                                                                                                    Например, цвет иконки «выбрать время»:
                                                                                                                                                    .bootstrap-datetimepicker-widget .glyphicon-time {
                                                                                                                                                      color: red;
                                                                                                                                                    }
                                                                                                                                                    
                                                                                                                                                    Чтобы это проще сделать, необходимо чтобы picker всегда оставался открытым.
                                                                                                                                                    Это можно сделать так (т.е. включить режим отладки):
                                                                                                                                                    $(function () {
                                                                                                                                                      $('#datetimepicker1').datetimepicker({
                                                                                                                                                        locale: 'ru',
                                                                                                                                                        debug:true
                                                                                                                                                      });
                                                                                                                                                    });
                                                                                                                                                    
                                                                                                                                                    1. Виталий
                                                                                                                                                      05 октября 2016, 12:38
                                                                                                                                                      Может кому то пригодится, сделал так:
                                                                                                                                                      .bootstrap-datetimepicker-widget .glyphicon {
                                                                                                                                                        color: red;
                                                                                                                                                      }
                                                                                                                                                      сразу для всех иконок.
                                                                                                                                                  2. Виталий
                                                                                                                                                    03 октября 2016, 22:20
                                                                                                                                                    Еще вопрос, сейчас при отркрытии календаря дата автоматом появляется и в самом поле, как изменить, чтобы поле оставалось пустым пока я не нажму на число?
                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                      04 октября 2016, 13:44
                                                                                                                                                      Установить параметр useCurrent со значением равным false:
                                                                                                                                                      $(function () {
                                                                                                                                                        $('#datetimepicker1').datetimepicker({
                                                                                                                                                          locale: 'ru',
                                                                                                                                                          format: 'DD.MM.YYYY',
                                                                                                                                                          useCurrent: false
                                                                                                                                                        });
                                                                                                                                                      });
                                                                                                                                                      
                                                                                                                                                    2. Виталий
                                                                                                                                                      02 октября 2016, 22:29
                                                                                                                                                      Здравствуйте, подскажите пожалуйста, я использую только календарь, без времени, как сделать, чтобы при отметке на календаре даты он закрывался автоматически?
                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                        04 октября 2016, 13:40
                                                                                                                                                        Для этого необходимо установить необходимый формат (например, DD.MM.YYYY):
                                                                                                                                                        $(function () {
                                                                                                                                                          $('#datetimepicker1').datetimepicker({
                                                                                                                                                            locale: 'ru',
                                                                                                                                                            format: 'DD.MM.YYYY'
                                                                                                                                                          });
                                                                                                                                                        });
                                                                                                                                                        
                                                                                                                                                        Он и так по умолчанию закрывается автоматически. Просто после ввода даты, он ждёт когда Вы укажете время. Необходимо отключить ввод времени, как это сделано выше.
                                                                                                                                                      2. Михаил
                                                                                                                                                        02 августа 2016, 09:20
                                                                                                                                                        Огромное спасибо автору!!!
                                                                                                                                                        Очень качественные полезные и легкие в понимании уроки!!!
                                                                                                                                                        Каждый раз, когда возникают вопросы по bootstrap -попадаю на ваш сайт и всегда нахожу ответы!!!)))
                                                                                                                                                        Спасибо большое вам!!!
                                                                                                                                                        1. OdIUm
                                                                                                                                                          20 мая 2016, 18:58
                                                                                                                                                          Добрый день, Александр.
                                                                                                                                                          Хочу использовать 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. Александр Мальцев
                                                                                                                                                            23 мая 2016, 12:16
                                                                                                                                                            Инициализацию компонента, имеющего id=datetimepicker, необходимо выполнять только один раз.
                                                                                                                                                            Установку defaultDate выполнять лучше так:
                                                                                                                                                            defaultDate: moment(12.04.1972',"DD-MM-YYYY")
                                                                                                                                                            
                                                                                                                                                            Для изменения даты используйте следующее:
                                                                                                                                                            //например, вывести в поле datetimepicker дату 12.04.1972 
                                                                                                                                                            $('#datetimepicker').data('DateTimePicker').date('12.04.1972');
                                                                                                                                                            
                                                                                                                                                          2. wiNs
                                                                                                                                                            28 апреля 2016, 17:36
                                                                                                                                                            Доброго времени суток!
                                                                                                                                                            Очень доволен Вашим ресурсом.
                                                                                                                                                            У меня к Вам вопрос, касающийся установки текущей даты в качестве начала отсчета. Например, сегодня 28.04.2016, мне необходимо, что бы календарь не давал выбирать более раннюю дату, отличную от сегодняшней (28.04.2016), а все остальные, начиная с этой даты — пожалуйста, выбирайте :-)
                                                                                                                                                            Заранее благодарю Вас за ответ.
                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                              29 апреля 2016, 11:38
                                                                                                                                                              Здравствуйте, извините что долго не отвечал.
                                                                                                                                                              За это отвечает параметр minDate.
                                                                                                                                                              Устанавливается он следующим образом:
                                                                                                                                                              $(function () {
                                                                                                                                                                $('#datetimepicker1').datetimepicker({
                                                                                                                                                                  locale: 'ru',
                                                                                                                                                                  minDate: moment()
                                                                                                                                                                });
                                                                                                                                                              });
                                                                                                                                                              
                                                                                                                                                              1. wiNs
                                                                                                                                                                29 апреля 2016, 12:58
                                                                                                                                                                На счет долгого ответа — Вы все же не обязаны подпрыгивать и сразу писать ответы всем жаждущим внимания) Я Вам очень признателен, что Вы хоть ответили))
                                                                                                                                                                Я прочитал про параметр minDate, ещё вчера, пробовал всякие вариации, но вот функцию moment (), не нашёл в Вашем описании :-) Было бы весьма полезно, если бы Вы чуточку расширили Ваше описание и добавили туда данный вопрос.

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

                                                                                                                                                                P.S. Уважаю качественный труд, а Ваш труд — качественный.
                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                  01 мая 2016, 13:06
                                                                                                                                                                  Напишу, но позже.
                                                                                                                                                                  moment.js — это библиотека для работы с датой в JavaScript. Она предоставляет готовые функции, которые позволяют осуществить разбор даты, а также её проверку, изменение и отображение.
                                                                                                                                                                  Представленный пример можно записать и так:
                                                                                                                                                                  $(function () {
                                                                                                                                                                    $('#datetimepicker1').datetimepicker({
                                                                                                                                                                      locale: 'ru',
                                                                                                                                                                      minDate: new Date()
                                                                                                                                                                    });
                                                                                                                                                                  });
                                                                                                                                                                  
                                                                                                                                                              2. wiNs
                                                                                                                                                                29 апреля 2016, 10:45
                                                                                                                                                                Видно рано поблагодарил xD
                                                                                                                                                              3. Антон
                                                                                                                                                                06 апреля 2016, 00:54
                                                                                                                                                                Подскажите, как можно сделать чтобы при выборе времени, при клике на «час» происходил не переход к окошку со списком часов от 00 до 23, а сразу подстановка текущего «часа в поле времени». Ну и с минутами соответственно тоже. Спасибо.
                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                  06 апреля 2016, 15:33
                                                                                                                                                                  Не совсем понял вопроса. Ну подставляйте сразу текущее время и дату:
                                                                                                                                                                   $(function () {
                                                                                                                                                                      $('#datetimepicker1').datetimepicker({
                                                                                                                                                                        locale: 'ru',
                                                                                                                                                                        defaultDate: new Date,
                                                                                                                                                                      });
                                                                                                                                                                  });
                                                                                                                                                                  
                                                                                                                                                                2. Mirehiko
                                                                                                                                                                  16 марта 2016, 14:50
                                                                                                                                                                  Здравствуйте, ваш способ подачи информации намного понятнее нежели на оф сайте и это радует. Спасибо вам все работает)
                                                                                                                                                                  Есть одна проблема мне нужно задать время, которое будет равно текущему плюс час, но не менее. Какие параметры нужно указать при этом? Получилось задать только не меньше текущего.
                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                    17 марта 2016, 03:10
                                                                                                                                                                    Здравствуйте.
                                                                                                                                                                    Необходимо использовать параметр minDate:
                                                                                                                                                                    $(function () {
                                                                                                                                                                      var minDate = new Date();
                                                                                                                                                                      minHours = minDate.getHours()+1;
                                                                                                                                                                      //текущее время + 1 час
                                                                                                                                                                      minDate.setHours(minHours);
                                                                                                                                                                      $('#datetimepicker1').datetimepicker({
                                                                                                                                                                        locale: 'ru',
                                                                                                                                                                        minDate: minDate, 
                                                                                                                                                                        defaultDate: minDate
                                                                                                                                                                      });
                                                                                                                                                                    });
                                                                                                                                                                    
                                                                                                                                                                  2. Ololosha
                                                                                                                                                                    29 февраля 2016, 04:15
                                                                                                                                                                    Подскажите, пожалуйста, возможно ли прикрутить к обычному div без input'а. И как то, отслеживать события?
                                                                                                                                                                    1. Александр
                                                                                                                                                                      05 февраля 2016, 09:11
                                                                                                                                                                      Здравствуйте.
                                                                                                                                                                      А как автоматически отправлять форму серверу при изменении значения даты.
                                                                                                                                                                      <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. Александр Мальцев
                                                                                                                                                                        05 февраля 2016, 15:27
                                                                                                                                                                        Здравствуйте.
                                                                                                                                                                        Событие change происходит только после потери фокуса элементом и не отслеживает каждый введённый Вами символ.
                                                                                                                                                                        Компонент datetimepicker имеет специальное событие change.dp (происходит, когда дата изменена):
                                                                                                                                                                        $("#datetimepicker1").datetimepicker().on('change.dp', function (e) {
                                                                                                                                                                          $("#myform").submit();
                                                                                                                                                                        });
                                                                                                                                                                        
                                                                                                                                                                        Но оно тоже происходит после потери фокуса.

                                                                                                                                                                        Если Вам необходимо отслеживать каждый введённый символ в поле и проверять значение даты, то используйте событие keypress:
                                                                                                                                                                        $( 'input[name="dts"]').keypress(function() {
                                                                                                                                                                          //тут необходимо написать проверку поля и в случае успеха отправлять его на сервер
                                                                                                                                                                        });
                                                                                                                                                                        
                                                                                                                                                                        1. Алексей
                                                                                                                                                                          09 марта 2018, 22:04
                                                                                                                                                                          Мне кажется здесь опечатка. Событие не 'change.dp' а 'dp.change'
                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                            10 марта 2018, 05:29
                                                                                                                                                                            Ага, правильно dp.change.
                                                                                                                                                                          2. Александр
                                                                                                                                                                            06 февраля 2016, 09:04
                                                                                                                                                                            1. Спасибо.
                                                                                                                                                                            2. Вы правильно заметили про отслеживание символов. Суть в том, что все проверки полей проводятся на сервере (пытаемся облагородить древнюю систему, еще на АСП и VBS написанную), в связи с этим вопрос, чтобы не писать скрипт проверки каждого символа в поле, возможно ли запретить ввод в поле с клавиатуры, оставив только возможность выбора «мышкой в календарике», и если да, то как?
                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                              06 февраля 2016, 15:00
                                                                                                                                                                              Добавить элементу input атрибут:
                                                                                                                                                                              readonly="readonly"
                                                                                                                                                                              
                                                                                                                                                                              1. Александр
                                                                                                                                                                                07 февраля 2016, 06:24
                                                                                                                                                                                Благодарю.
                                                                                                                                                                        2. Дмитрий
                                                                                                                                                                          14 декабря 2015, 09:16
                                                                                                                                                                          Добрый день!
                                                                                                                                                                          А почему не один из приведённых здесь примеров не работает?
                                                                                                                                                                          Тема ещё актуальна?
                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                            14 декабря 2015, 09:37
                                                                                                                                                                            Добрый день!
                                                                                                                                                                            Проверьте, всё должно работать.
                                                                                                                                                                            1. Дмитрий
                                                                                                                                                                              14 декабря 2015, 10:50
                                                                                                                                                                              Насколько я понимаю при нажатии на это поле должен появится календарик и в нем можно выбрать дату, верно?
                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                14 декабря 2015, 11:05
                                                                                                                                                                                Да, верно.
                                                                                                                                                                                1. Дмитрий
                                                                                                                                                                                  14 декабря 2015, 13:54
                                                                                                                                                                                  Пардон, да действительно всё работает.
                                                                                                                                                                                  Подскажите, а как вывести только время без даты?
                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                    15 декабря 2015, 05:55
                                                                                                                                                                                    Это рассказано в 5 пункте раздела «Основы работы с виджетом Bootstrap datetimepicker».
                                                                                                                                                                                    1. Дмитрий
                                                                                                                                                                                      15 декабря 2015, 08:35
                                                                                                                                                                                      Спасибо, разобрался.
                                                                                                                                                                          2. Maksim
                                                                                                                                                                            13 ноября 2015, 11:44
                                                                                                                                                                            Добрый день.
                                                                                                                                                                            разобрался как присвоить переменные, дополнил скрипт следующими строками:
                                                                                                                                                                                   .on('changeDate', function(){
                                                                                                                                                                                    var startdate = $('#startdate').val();
                                                                                                                                                                                    var enddate = $('#enddate').val();
                                                                                                                                                                                        
                                                                                                                                                                                        alert(startdate +  enddate);
                                                                                                                                                                                    
                                                                                                                                                                            }); 
                                                                                                                                                                            
                                                                                                                                                                            1. Maksim
                                                                                                                                                                              11 ноября 2015, 14:53
                                                                                                                                                                              Добрый день, Александр.
                                                                                                                                                                              Спасибо за описание виджета. Попробовал использовать такой код:
                                                                                                                                                                                                      <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. Дарья
                                                                                                                                                                                10 ноября 2015, 12:13
                                                                                                                                                                                Скажите, пожалуйста, на данный момент в IE работает виджет даты? Если да, то в каком формате дата отображается: дд.мм.гггг или mm/dd/yyyy?
                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                  10 ноября 2015, 16:12
                                                                                                                                                                                  Виджет Bootstrap 3 Datepicker работает в IE.
                                                                                                                                                                                  Формат даты зависит от локали. В ru — дд.мм.гггг. В en — mm/dd/yyyy.
                                                                                                                                                                                2. Ольга
                                                                                                                                                                                  06 ноября 2015, 18:34
                                                                                                                                                                                  Подключаю плагин. хочу русифицировать. Браузер ругается на параметры. не найдены. Компонент взяла отсюда
                                                                                                                                                                                  При желании можете скачать этот архив, в котором собраны последние версии компонентов.
                                                                                                                                                                                  <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. Александр Мальцев
                                                                                                                                                                                    07 ноября 2015, 04:24
                                                                                                                                                                                    Ольга, функционал последних версий этого компонента был значительно переработан. Название параметров и методов были изменены. Поэтому примеры, представленные в статье будут работать только с версией, ссылка на которую представлена в самой статье.
                                                                                                                                                                                    В новой версии Ваш код необходимо переписать так:
                                                                                                                                                                                    $(document).ready(function(){
                                                                                                                                                                                        $('#date1, #date2').datetimepicker({
                                                                                                                                                                                          format: 'L',
                                                                                                                                                                                          locale: 'ru'
                                                                                                                                                                                        });
                                                                                                                                                                                      });
                                                                                                                                                                                    
                                                                                                                                                                                    В ближайшее время переработаю текст статьи под новую версию компонента Datetimepicker.
                                                                                                                                                                                    1. Ольга
                                                                                                                                                                                      07 ноября 2015, 13:10
                                                                                                                                                                                      Понятно. спасибо за отзыв. пока вы не доработали статью, можно ссылку на новый функционал виджета? Хотелось бы знать как он теперь работает.
                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                        08 ноября 2015, 02:40
                                                                                                                                                                                  2. Finnesko
                                                                                                                                                                                    31 июля 2015, 11:10
                                                                                                                                                                                    Как в bootstrap-datepicker сделать так чтоб он показывал в всплывающем окошке года с 1900 по 1909?
                                                                                                                                                                                    На данный момент он показывает с 2010 по 2019
                                                                                                                                                                                    1. Finnesko
                                                                                                                                                                                      04 августа 2015, 14:24
                                                                                                                                                                                      Не получается(
                                                                                                                                                                                      Может это связано с версией, у меня стоит версия 2.0
                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                        04 августа 2015, 16:35
                                                                                                                                                                                        Скорее всего.
                                                                                                                                                                                        Попробуй обновиться на последнюю стабильную версию 4.15.35.
                                                                                                                                                                                        1. Finnesko
                                                                                                                                                                                          06 августа 2015, 15:16
                                                                                                                                                                                          Спасибо помогло!) После обновления до версии 4.15.35 все заработало. Только появился новый вопрос: Как сперва показывать пользователю года ( выбор года )? В версии 2.0 это осуществлялось так: startView: 2
                                                                                                                                                                                          $('#date_of_birth').datepicker({startView: 2 });
                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                            08 августа 2015, 16:11
                                                                                                                                                                                            viewMode: 'years'
                                                                                                                                                                                      2. Александр Мальцев
                                                                                                                                                                                        31 июля 2015, 15:02
                                                                                                                                                                                        <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>
                                                                                                                                                                                        
                                                                                                                                                                                      3. Алексей
                                                                                                                                                                                        27 мая 2015, 12:39
                                                                                                                                                                                        нашел что полную дату можно получить вот так:
                                                                                                                                                                                        $('#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. Александр Мальцев
                                                                                                                                                                                          27 мая 2015, 14:42
                                                                                                                                                                                          Алексей, у меня данная функция работает правильно. Попробывал в разных браузерах, всё верно.
                                                                                                                                                                                          DateTimePicker - метод date
                                                                                                                                                                                        2. Алексей
                                                                                                                                                                                          26 мая 2015, 12:04
                                                                                                                                                                                          $('#dt1').datetimepicker({
                                                                                                                                                                                          locale: 'ru', defaultDate: '2015-05-25', format: 'D dddd' });

                                                                                                                                                                                          в input соответственно «25 вторник»
                                                                                                                                                                                          а в экшен надо передать yyyy-mm-dd
                                                                                                                                                                                          можно ли как то вытащить полную дату?
                                                                                                                                                                                          1. Алексей
                                                                                                                                                                                            22 мая 2015, 18:11
                                                                                                                                                                                            Спасибо за ответ
                                                                                                                                                                                            и еще вопрос
                                                                                                                                                                                            мне нужно что бы выбирался только месяц
                                                                                                                                                                                            я пишу так $('#datetimepicker1').datetimepicker({language: 'ru', viewMode: 'months', format: «MM YYYY»});
                                                                                                                                                                                            но при выборе месяца открывается календарь на выбор даты и т.д.
                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                              24 мая 2015, 16:14
                                                                                                                                                                                              При выполнении Вашего кода столкнулся с точно такой же проблемой.
                                                                                                                                                                                              Из данной ситуации получилось выйти, только обновив все компоненты до последних версий.
                                                                                                                                                                                              При желании можете скачать этот архив, в котором собраны последние версии компонентов.
                                                                                                                                                                                            2. Алексей
                                                                                                                                                                                              22 мая 2015, 14:39
                                                                                                                                                                                              но тогда нельзя применить формат
                                                                                                                                                                                              мне надо что бы было так:$('#datetimepicker1').datetimepicker({language: 'ru', defaultDate: «21/05/2015», viewMode: 'years', format: «MMMM YYYY»}); май 2015, но так не работает
                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                22 мая 2015, 17:15
                                                                                                                                                                                                Формат применяется в любом случае. Просто в твоём примере JavaScript не может произвести разбор строки «21/05/2015», т.е. преобразовать строку в дату. Строка, содержащая дату должна быть в формате ISO-8601 или записана таким образом чтобы её мог разобрать Date.parser.
                                                                                                                                                                                              2. Алексей
                                                                                                                                                                                                22 мая 2015, 10:05
                                                                                                                                                                                                Добрый день.
                                                                                                                                                                                                Подскажите как сделать что бы текущая дата, сразу отображалась, в input?
                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                  22 мая 2015, 14:05
                                                                                                                                                                                                  Добрый день.
                                                                                                                                                                                                  Установить значение defaultDate.
                                                                                                                                                                                                  Например, так:
                                                                                                                                                                                                  $('#datetimepicker1').datetimepicker({language: 'ru',defaultDate: new Date});
                                                                                                                                                                                                  
                                                                                                                                                                                                2. warwar
                                                                                                                                                                                                  20 апреля 2015, 13:05
                                                                                                                                                                                                  Добавляем выбор даты в блок, не в основном контексте position:absolute и получаем ошибку: «uncaught typeerror: cannot read property 'top' of undefined»

                                                                                                                                                                                                  Кто сталкивался с такой проблемой, и как ее решать?
                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                    20 апреля 2015, 14:23
                                                                                                                                                                                                    Добрый день!
                                                                                                                                                                                                    Приведите Ваш код на jsfiddle.net/.
                                                                                                                                                                                                    Так как сложно судить только по тексту ошибки.
                                                                                                                                                                                                    P.S. Добавление поля с выбором даты в div с position:absolute у меня ошибок не вызвало.
                                                                                                                                                                                                  2. Максим
                                                                                                                                                                                                    17 февраля 2015, 16:54
                                                                                                                                                                                                    Добрый день!
                                                                                                                                                                                                    Столкнулся с такой ситуацией…
                                                                                                                                                                                                    имею такой код
                                                                                                                                                                                                    $('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. Александр Мальцев
                                                                                                                                                                                                      18 февраля 2015, 12:10
                                                                                                                                                                                                      Добрый день, Максим! На этот вопрос нет однозначного ответа, тут придётся что-то придумывать. Так как Вы уже нашли один из вариантов ответа на свой вопрос, то могу для сравнения предложить другой вариант, только не знаю, подойдёт он Вам или нет.

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

                                                                                                                                                                                                    2. Anna
                                                                                                                                                                                                      09 января 2015, 23:31
                                                                                                                                                                                                      Александр, а Вы планируете уроки по modx revo&
                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                        10 января 2015, 03:59
                                                                                                                                                                                                        Желание написать уроки по MODX Revo есть, но останавливает только объёмность. Не знаешь с чего начать…
                                                                                                                                                                                                        Уроки в каком направлении Вам бы хотелось увидеть? В виде пошаговых инструкций или в каком-нибудь другом плане?

                                                                                                                                                                                                        А так как материал объёмный, рассмотреть всё систему просто не возможно. Тут тоже надо определиться, в каком направлении писать:
                                                                                                                                                                                                        1. Подробное рассмотрение самой CMS
                                                                                                                                                                                                        2. Краткое рассмотрение самой CMS и дополнений к ней
                                                                                                                                                                                                        3. Пошаговые инструкции по созданию сайта на CMS, т.е. связанные между собой уроки от установки до получения готового сайта.
                                                                                                                                                                                                        1. Витя
                                                                                                                                                                                                          06 сентября 2015, 18:07
                                                                                                                                                                                                          Желание написать уроки по MODX Revo есть, но останавливает только объёмность.
                                                                                                                                                                                                          — напоминает извращенцев которые в век мобильной связи юзают почтовых голубей да еще и со сломанным крылом. Более убогово убожества чем MODX найти очень сложно!
                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                            07 сентября 2015, 11:35
                                                                                                                                                                                                            Витя, прежде чем что-то высказывать лучше бы поделились своим опытом. Сколько Вы лет в разработке, и сколько Вы сайтов создали по MODX и на других CMS. С какими проблемами Вы сталкивались при разработке и сопровождению сайтов. Как ведут себя сайты (CMS) под большими нагрузками и многое другое. Да хотя бы указали, какие конкретные плюсы и минусы, чтоб понятно было, а не просто непонятные утверждения.
                                                                                                                                                                                                          2. Anna
                                                                                                                                                                                                            10 января 2015, 12:09
                                                                                                                                                                                                            Хотелось бы пошаговое создание сайта (простого) с 2-3 страницами. Например, у главной страницы один шаблон, у других стр, другой шаблон,. Потом как они между собой соединяются, т.е. переход из меню с главной (со своим шаблоном)на второстепенную с др шаблоном (потому что этого я не нашла и на этом закончила изучение modx. И шаблон можно обычный — простой, без слайдеров например, т.е. header, sidbar, footer, content. Ну и включая возможность комментирования. Спасибо.
                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                              11 января 2015, 08:07
                                                                                                                                                                                                              Уроки по MODX начну писать со следующей недели. В планах не просто рассмотреть несколько страниц и переходы между ними, а именно создание полнофункционального сайта.
                                                                                                                                                                                                        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.