Bootstrap 3 DateTimePicker - Календарь для input
В этой статье рассмотрим компонент 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 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 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 DateTimePicker только времени (осуществляется с помощью параметра pickTime
):
<script>
$(function () {
$('#datetimepicker4').datetimepicker(
{format: 'HH:mm', locale: 'ru'}
);
});
</script>

Вызов виджета 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>

Использование 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 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", переключения в режим выбора года и др.).
Вот проблемный скрипт и чем дело не понятно.
И второй вопрос — как увеличить minDate: moment() на один день? Самому вычислять или можно как то более умнее?
itchief.ru/assets/uploadify/7/2/2/7229ae38ebcb2b9a765cfbd9ba810ffe.jpg
1. Создаю два элемента на странице Datatimepicker и из HTML5 Datatime-local.
2. При старте определяю тип поля в Datatime-local, если это Text, то его прячу свойством Display='none'
3. Если это не текст то исчезает Datatimepicker.
Таким образом виден только один из них. Если это современный браузер то Datatime-local, если старый то Datatimepicker.
Ну и для того чтобы все не мелькало и было все красиво, элемент Datatimepicker создаю динамически, Александр написал здесь статью как это сделать на JS и jQuery.
А в JavaScript уже прописать, что если datetime-local не поддерживается (type таких элементов равен text), то добавить к ним необходимые элементы и инициализировать их как datetimepicker:
Пример доступен по этой ссылке: b3-dtm-2
Можно как то реализовать что бы после выбора даты открывался timepicker? Что бы когда я допустил нажал на 31.12.2020 сразу показала меню выбора времени?
Есть начальная дата и конечная. По ним 2 вопроса:
1) Как высчитать количество дней между датами?
2) Как в календаре с конечной датой блокировать даты, которые раньше, чем я уже выбрал в «начальном» календаре? То есть если я выбрал начальную дату 1 декабря, то в календаре конечной даты надо заблокировать все даты до 1 декабря.
Кусок кода прилагаю:
Заранее благодарен за помощь
Для того чтобы во втором календаре нельзя было выбрать дату меньше, чем в первом и наоборот необходимо написать следующее:
Высчитать количество дней между датами:
Подскажите пожалуйста. Как сделать чтоб дата была доступна до определенного времени в календаре. Допустим до завтра 8.30 утра.
Заранее спасибо.
Сейчас код такой, но работает не корректно. Помогите, пожалуйста
сейчас почти хорошо, но время не возвращается к исходному значению 9:00
Есть два блока, с input radio и полем для выбора даты со временем(datetimepicker).
Файл js для календаря:
Скрин:
В блоке с input radio в цикле я отображаю приоритеты выполнения задачи. Там есть значение дней, оно хранится в днях. Нужно чтобы при выборе приоритета, в поле с датой автоматически проставлялось значения(текущая дата-время + значение дней). Как только страница прогружена, по умолчанию выбран input radio с названием «Низкий»(это +10 дней). Следовательно в поле даты уже должна быть выбрана конкретная дата. Количество дней у меня хранится в $priority['DAYS'], где его указывать лучше я не знаю. В value указано id, для последующей обработки в php. Так же должна быть возможность сменить дату, после выбранного приоритета.
Указывать количество дней для радиокнопок лучше с помощью атрибута data.
Например:
Далее подставить значение data в поле можно с помощью JavaScript:
Пример, в котором всё это собрано находится здесь.
Файл JS:
Мой вариант тоже работоспособный, но с точки зрения производительности Ваш вариант является лучше?
Можете подсказать, как сделать выбор в одном инпуте период дат?
И как добавить кнопку «ок»?
2. И как можно реализовать 2 time picker с одновременным показом inline блока. Просто получается, что inline показывается там где стоит фокус ни input.
3. И еще вопрос: на модалке, где показывается блок time picker, он находится внутри модального окна.
Такое ощещение, что проблема с «opacity»
Столкнулся с такой проблемой… Когда выбираю минимальную и максимальную дату(допустим можно выбрать даты с 02.03.2020 по 08.03.2020), то последнее значение 08.03.2020 не выбирается. Т.е. чтобы выбрать эту дату, нужно вначале выбрать любую другу, а потом уже нужную. Помогите решить вопрос…
Вот код:
Установите 08.03.2020 на конец дня:
Подскажите пожалуйста как вывести автоматически, при нажатии на input и на иконку календаря. В данный момент надо нажимать на иконку календаря.
Чтобы это реализовать, можно просто при нажатию на input программно вызвать событие click на иконке календаря.
Пример можно посмотреть здесь.
Спасибо за уроки.
Возник вопрос, а как получить значение, которое выбрано в datetimepiker?
Чтобы потом его можно было отправить серверу.
Я читал документацию, но нигде не нашел описания.
Может не внимательно :)
Спасибо.
Посмотрите ответ в этом комментарии.
Прошу помочь с проблемой, встроил данный плагин в форму запроса данных из базы, при переходе с которой открывается эта же страница с формой и парой таблиц внизу с данными. Как сделать так чтобы при открытии страницы в форме оставались выбранные даты? Из вашей статьи вынес только 1 вариант: добавить кнопку в которую запихивать дату при переходе и вызывать ее автоматически.
Но столкнулся с таким вопросом, что при подключении файла: href=«css/bootstrap.min.css» / — верстка плывет. Я его отключаю, календарь работаем, только не показывает стрелки на переход месяцев и логотип времени внизу. Как быть? Спасибо.
Подскажите, что за беда с этой локализацией?
Ставил
Выдает английский календарь
Написал
Календарь все равно выдается на английском, да еще и мало того, но вместо даты пишет
Tuesday.July.YYYY
:((
помогите, подскажите, как его локализовать на русский?
поставил language: 'ru'
все равно по английски
нашел bootstrap-datepicker.ru.min.js
может его надо поставить в список скриптов а странице, чтобы заработал language: 'ru'
Хочу отредактировать стили календаря, но возникает вопрос:
Как сделать чтобы форма самого календаря при появлении оставалась а не исчезала. Когда я пробую посмотреть сетку html этого календаря, то календарь исчезает и сетка (которая выводиться в браузере через F12) тоже исчезает, срабатывает display:none.
Пробовал найди через js файлы подгрузку display, безуспешно. !important в css не помог.
Может быть вы знаете как быть, а так хочется задизайнить календарь. И как в таком случае добавить в эту сетку html дополнительные классы.
Заранее Вам благодарен!
В консоли выводится ошибка:
Подключения:
Не знаю, так сложно сказать. Попробуйте обновить плагин datetimepicker до последней версии. А файл moment.min.js у вас уже с локалями?
Так не корректно указывать дату. Её необходимо задавать в формате ISO или с помощью функции moment().
После исправления примера, он стал работать уже корректно.
Установка даты с помощью moment():
Добавил эту строчку:
<img
src=«https://itchief.ru/assets/uploadify/5/a/8/5a894d8dd6350e33426cb909c9d81b56s.jpg» class=«fancybox thumbnail center»>
Можно ли наложить ограничения на задаваемый период, чтобы качестве начала периода можно было выбирать только любой понедельник, а для его окончания только любое воскресенье?
Те чтобы было можно задавать периоды типа:
ПН 22.01.2018 — ВС 28.01.2018 или ПН 22.01.2018 — ВС 04.02.2018
Можно ли задать минимальную длину периода?
Не вижу проблем, но для этого придётся ещё написать эту логику на JavaScript.
Вот подключаю скрипты в 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'
});
});
Работать никак не хочет. Помогите пожалуйста руки уже опускаются.
Демонстрация работы виджета не работает или это проблема на моей стороне?
На страничке ко всем примерам добавлены кнопочки «Скопировать» и «Запустить».
Скачал пример и попробовал его повторить не на 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) тоже из предоставленного примера.
Извините за беспокойство.
(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)
Можно ли определённый список дат выделить в календаре каким-нибудь цветом?
Например:
, еще подскажите как выделить промежуток между двумя датами. Спасибо
Не знаю, может у вас какой-то другой компонент.
Вот скриншот.
Выделение диапазона дат можно существить следующим образом:
Параметр debug со значением true можно использовать для отладки. На продакшене его конечно необходимо убрать.
А можно календарь не привязывать к input, а просто разместить на странице?
А как в данном случае получить значение выбранной даты?
Например, при изменении даты (ссылка на демку):
Еще подскажете может, как убрать выбор времени?
Я искала в описании и комментария, но не нашла подобного решения. пробовала что-то сама «сварганить», но результата не принесло.
заранее благодарю за потраченное время!
Для этого необходимо определить дату начала и окончания текущего месяца. Чтобы это выполнить можно использовать, например, moment.
Код JavaScript:
Готовый пример доступен на jsfiddle: jsfiddle.net/itchief/7o8054L0/
подскажите пожалуйста:
— как сделать так что бы в input datetimepicker при загрузке страницы сразу отображалась текущяя дата
использовал свойство showToday:true но оно gоказывает индикатор текущей даты в виджете
в defaultDate не смог засунуть системную дату в формате (ДД-ММ-ГГГГ).
— Как запретить ввод (выбор) даты которая больше текущей (сегодняшней)
Спасибо огромное.
Это делается так:
Живой пример на jsfiddle.net: jsfiddle.net/itchief/vrk3n1az/
в Вопросе Татьяны увидел «maxDate: moment()» и заработало
а с дефолтом не догадался как то((
надо учить js
Никак не могу понять почему браузер ругается на function (вроде всё подключил правильно).
Подскажите, пожалуйста.
index.html:157 Uncaught ReferenceError: $ is not defined
На моей странице datapicker конфликтует с модальным окном на бутстрапе. А именно мешает строчка
Из за этого модальное окно при открытии неактивно, да и вся остальная страница тоже. Помогает только перезагрузка страницы.
не подскажите, как это можно исправить?
Собрал сборку, добавил datetimepicker как на страницу, как в модальное окно — всё отлично работает. Ссылка на сборку: yadi.sk/d/bWY9wIr73LXNK4
Александр, не подскажите ли, вот добавил модальное окно на свою страницу, а оно при открытии серое, как и остальная страница, ничего не активно. Помогает только перезагрузка страницы. Методом проб выяснил, что мешает
Удалять его не выход, перестает работать datapicker.
Можете что нибудь посоветовать?
Всё сделал — всю документацию прочитал, подключил и установил, без использования bootstrap даже, чисто jQuery и moment.js.
И может, конечно, не понял что-то на английском, но является ли багом, что при выборе даты посредством клавиш — после нажатия enter или escape — перестают работать клавиши в календаре? На офф сайте в примерах такой же глюк. Просто может есть какое то решение? Подумываю просто как нибудь отключить эти две клавиши в календаре и сделать события при открытом календаре и нажатия на эти клавиши. Просто уже есть на странице кнопка, выполняющая роль закрытия/открытия календаря, и после её нажатия в календаре всё работает в плане клавиш. Использовал просто встроенные функции hide и show. В документации написано, что по дефолту escape и enter так же используют только hide и ничего больше, но вот почему после их нажатия перестает работать навигация клавиш — не понятно.
Надеюсь, что ответите — специально на сайте для этого зарегистрировался)
Исправленный bootstrap-datetimepicker.js можете скачать по ссылке: yadi.sk/d/a_jkXWR43LPaj9
И это значит всё-таки баг?
Архив обновил, добавил туда минифицированную версию.
Как задать текущую дату по умолчанию( defaultDate: ?), и что бы «вчерашние числа» выбрать было не возможно?)
Только проверьте, я сам этот календарь изучаю второй день, а момент.js неделю где-то.
Или с помощью moment:
upd:
В общем понял… ждать обновления! :)
Что то ни как… Инпут + иконку выводит, а вот календаря — нет.
Файлы тут и на GitHub разные, провозился два часа пока догнал что дело может быть в них.
Вопрос как запретить в инпутах ввод даты и времени, ручками?
И как поставить интервал с 11:00 — 23:00, приведенный пример ниже, чот не работает. Выбор начинается с 01:18 и разрешает всё.
Проверил на новом Хроме, невозможно выбрать дату. Выпадает календарь, а выбрать не дает :(
Будет ли обновлен этот урок?
Необходимо написать так:
Да, есть в планах переработать эту статью.
Скриншот: gyazo.com/f7d94b85541631828ada1b1867cb7bbd
Ссылка на сайт:beldom62.ru
Всплывающая форма в шапке — под номером телефона.
Помогите, пожалуйста.
здесь выводиться ближайшие 7 дней без выходных (суббота, воскресенье).
здесь выводится текущее время время до 21 с интервалом 15 мин.
Например, элемент в который будем выводить нужные даты:
Скрипт JavaScript:
HTML код:
JavaScript сценарий:
Например:
Начать вычислять можно так:
После этого вычислить время, если Timezone пользователя отличается от базовой, и подставить их в конструкцию инициализации datetimepicker.
Я в поле Дата ручками ввожу дату в формате: 2017-03
щелкаю в пустой области сайта, а поле само дописывает 2017-03-01
Как избавится от дописывания ????????
Есть два поля, к которым подключен плагин. Это дата начала и дата окончания события.
Подскажите пожалуйста, возможно ли сделать так, чтобы выбрав дату начала события, такая же устанавливалась и на дату окончания события? Но если событие НЕ однодневное, то можно было спокойно поставить дату окончания какую угодно
Будет так:
Но в консоли получаю следующее
С виджетом версии 3.1.3 ваш код отказывался работать.
Обновил до 4.17.37 и заработало.
Еще раз благодарю!!!
Версии bootstrap менял, jquery менял, календарь не захотел выпадать, к сожалению
Есть вопрос по сабжу:
у меня выведен такой вариант с выбором промежутка yadi.sk/i/4iyC5ocI3ExLbC. при клике, появляется либо первый календарь, либо второй, но мне необходимо реализовать такой функционал yadi.sk/i/Y_JWGJm53ExLrK, возможно ли это средствами datetimepicker.js + moment.js?
Заранее благодарен за ответ!!!
вот с чем не разобрался, так это — как заставить календарь закрываться при выборе даты? в datepicker это из коробки есть, здесь же это наверняка настраивается — я смотрел функции и события плагина datetimepicker, но не осилил ))
вдруг этот вопрос уже затрагивался в комментариях — приношу свои извинения. комменты очень длинные )))
Исправлю самого себя — никакого хвоста нет. Только дополнительный плагин moment.js )
Но вопрос остался открытым — почему именно bootstrap-datetimepicker?
Но почему не был взят вот этот — github.com/uxsolutions/bootstrap-datepicker?
На GitHub этот плагин собрал максимальное число stars )
У того плагина, который Вы описываете, буквально целый хвост зависимостей, которые нужно подключать. У Bootstrap Datepicker два стандартных подключения:
Попутно хочу выразить автору свое уважение в плане поддержки сайта — нигде я еще не видел, чтобы автор так много, подробно отвечал на вопросы. Буквально под каждой статьей целая лента комментариев. ))
Спасибо за прекрасную работу!
Естественно, хочется отправлять введенную дату на сервер. Предполагается, что отправка будет реализована с помощью кнопки input type = «submit» примерно так:
Собственно вопрос: в каком виде (какой тип данных) отправляется на сервер? Это строка (String) в формате типа «13/11/2016 12:43» или что-то другое?
Можно, например, в формате ISO:
Подскажите пожалуйста, как мне сделать так, чтобы при выборе диапазона дат, ниже появлялась таблица. определенная таблица к определенной дате.
Вторую дату получаем аналогично (переменная date2). Дальше вам необходимо написать какой-то алгоритм. Например, вычесть одну дату из другой, или что-то ещё для того чтобы получить какой-то диапазон. Далее не совсем понятно…
Отобразить таблицу можно используя методы jQuery show. Для скрытия таблицы можно использовать метод hide.
Функция выбора даты
Календарь в шаблоне при добавлении объявления
Js
Это все работает.
Календарь в дополнительных полях
Js по аналогии с тем, что указал выше.
Тут открываться не хочет никак, хотя с другими календарями работает, например вот с этим, но он меня не устраивает.
другие скрипты на сайте перестают работать, а когда добавляю такие
тоесть без минимума/максимума-все остальные скрипты работают нормально.
В чем может быть ошибка и куда копать?
заменил на
теперь все работает
Если Вам необходимо это сделать для некоторой группы, то присвойте не id, а определённый класс (например, dtp) необходимым datetimepicker.
Код HTML:
Код JavaScript:
Еще такой момент, если выберу дату например 5, 10, 20 дней назад, а потом текущую-тогда она выбирается.
В другом варианте у меня есть ограничение до текущей даты, указал minDate: new Date() и текущая дата выбирается, по идее и в maxDate: new Date() она должна выбираться… возможно в самом коде календаря что-то не так…
Например, цвет иконки «выбрать время»:
Чтобы это проще сделать, необходимо чтобы picker всегда оставался открытым.
Это можно сделать так (т.е. включить режим отладки):
сразу для всех иконок.
Он и так по умолчанию закрывается автоматически. Просто после ввода даты, он ждёт когда Вы укажете время. Необходимо отключить ввод времени, как это сделано выше.
Очень качественные полезные и легкие в понимании уроки!!!
Каждый раз, когда возникают вопросы по bootstrap -попадаю на ваш сайт и всегда нахожу ответы!!!)))
Спасибо большое вам!!!
Хочу использовать datetimepicker в качестве инструмента для установки и редактирования даты рождения пользователя.
Поле отображается, календарь работает, данные уходят. Проблема в отображении.
Как при загрузке страницы получать данные из бд и отображать их в календаре? Пытаюсь передать данные из БД в defaultDate, но он глючит и отображает их не в том формате. Тоесть передаю данные в формате dd.mm.yyyy (например 12.04.1972), а на экране «1998-05-20T21:46:45+03:00»
Ниже код (если defDate передать, тоже не тот формат)
Если DeffaultDate не выставлять — соханяется и отображается все правильно… не пойму в чем причина
Установку defaultDate выполнять лучше так:
Для изменения даты используйте следующее:
Очень доволен Вашим ресурсом.
У меня к Вам вопрос, касающийся установки текущей даты в качестве начала отсчета. Например, сегодня 28.04.2016, мне необходимо, что бы календарь не давал выбирать более раннюю дату, отличную от сегодняшней (28.04.2016), а все остальные, начиная с этой даты — пожалуйста, выбирайте :-)
Заранее благодарю Вас за ответ.
За это отвечает параметр minDate.
Устанавливается он следующим образом:
Я прочитал про параметр minDate, ещё вчера, пробовал всякие вариации, но вот функцию moment (), не нашёл в Вашем описании :-) Было бы весьма полезно, если бы Вы чуточку расширили Ваше описание и добавили туда данный вопрос.
Спасибо Вам за скорый ответ) Все попробовал — работает ;-)
P.S. Уважаю качественный труд, а Ваш труд — качественный.
moment.js — это библиотека для работы с датой в JavaScript. Она предоставляет готовые функции, которые позволяют осуществить разбор даты, а также её проверку, изменение и отображение.
Представленный пример можно записать и так:
Есть одна проблема мне нужно задать время, которое будет равно текущему плюс час, но не менее. Какие параметры нужно указать при этом? Получилось задать только не меньше текущего.
Необходимо использовать параметр minDate:
А как автоматически отправлять форму серверу при изменении значения даты.
Отправляет после изменения даты и нажатия Enter
Событие change происходит только после потери фокуса элементом и не отслеживает каждый введённый Вами символ.
Компонент datetimepicker имеет специальное событие change.dp (происходит, когда дата изменена):
Но оно тоже происходит после потери фокуса.
Если Вам необходимо отслеживать каждый введённый символ в поле и проверять значение даты, то используйте событие keypress:
2. Вы правильно заметили про отслеживание символов. Суть в том, что все проверки полей проводятся на сервере (пытаемся облагородить древнюю систему, еще на АСП и VBS написанную), в связи с этим вопрос, чтобы не писать скрипт проверки каждого символа в поле, возможно ли запретить ввод в поле с клавиатуры, оставив только возможность выбора «мышкой в календарике», и если да, то как?
А почему не один из приведённых здесь примеров не работает?
Тема ещё актуальна?
Проверьте, всё должно работать.
Подскажите, а как вывести только время без даты?
разобрался как присвоить переменные, дополнил скрипт следующими строками:
Спасибо за описание виджета. Попробовал использовать такой код:
Виджет работает как и задумывалось. Отображаются только месяцы, есть выбор года. Есть второе окно, чтобы можно было выбрать диапазон. При выборе в первом окне, автоматически выбирается та же дата, что в первом. А во втором всегда можно выбрать другую. Теперь возник вопрос, как при изменении даты передать эти данные AJAX POST запросом. Как передавать – понимание есть.
Написал отдельные скрипты
События срабатывают. А вот что передать – никак не разберусь. Не могу понять, как присвоить каким-то переменным выбранные даты?
Как объединить событие on.changedate сразу на оба элемента #startdate и #enddate, когда выбирается диапозон? И как сделать, чтобы при загрузке страницы и при нажатие очиститить, по событию clearDate месяц (дата) всегда выбирался текущий? Default month не работает.
Формат даты зависит от локали. В ru — дд.мм.гггг. В en — mm/dd/yyyy.
option pickDate is not recognized!
Еще хочу чтобы сразу после выбора календарь пропадал. делаю так
но он не скрывается. может не то событие?
В новой версии Ваш код необходимо переписать так:
В ближайшее время переработаю текст статьи под новую версию компонента Datetimepicker.
На данный момент он показывает с 2010 по 2019
Может это связано с версией, у меня стоит версия 2.0
Попробуй обновиться на последнюю стабильную версию 4.15.35.
$('#date_of_birth').datepicker({startView: 2 });
$('#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»
как обойти?
locale: 'ru', defaultDate: '2015-05-25', format: 'D dddd' });
в input соответственно «25 вторник»
а в экшен надо передать yyyy-mm-dd
можно ли как то вытащить полную дату?
и еще вопрос
мне нужно что бы выбирался только месяц
я пишу так $('#datetimepicker1').datetimepicker({language: 'ru', viewMode: 'months', format: «MM YYYY»});
но при выборе месяца открывается календарь на выбор даты и т.д.
Из данной ситуации получилось выйти, только обновив все компоненты до последних версий.
При желании можете скачать этот архив, в котором собраны последние версии компонентов.
мне надо что бы было так:$('#datetimepicker1').datetimepicker({language: 'ru', defaultDate: «21/05/2015», viewMode: 'years', format: «MMMM YYYY»}); май 2015, но так не работает
Подскажите как сделать что бы текущая дата, сразу отображалась, в input?
Установить значение defaultDate.
Например, так:
Кто сталкивался с такой проблемой, и как ее решать?
Приведите Ваш код на jsfiddle.net/.
Так как сложно судить только по тексту ошибки.
P.S. Добавление поля с выбором даты в div с position:absolute у меня ошибок не вызвало.
Столкнулся с такой ситуацией…
имею такой код
все работает. кроме пролей даты, к которым подключен этот datetimepicker.
порылся в его свойствах, но вроде не нашел что-то типа:
как у datepicker.
может плохо искал? или придется самому дописывать?
PS
Покапавшись в коде пикера, увидел что он таки вызывает событие, но не у самого input, а у основного div, пока вышел из положения так:
но мне кажется это не правильно… почему то… :-)
Он будет заключаться в изменении значения атрибута text=«date» на text=«type».
Уроки в каком направлении Вам бы хотелось увидеть? В виде пошаговых инструкций или в каком-нибудь другом плане?
А так как материал объёмный, рассмотреть всё систему просто не возможно. Тут тоже надо определиться, в каком направлении писать:
1. Подробное рассмотрение самой CMS
2. Краткое рассмотрение самой CMS и дополнений к ней
3. Пошаговые инструкции по созданию сайта на CMS, т.е. связанные между собой уроки от установки до получения готового сайта.
— напоминает извращенцев которые в век мобильной связи юзают почтовых голубей да еще и со сломанным крылом. Более убогово убожества чем MODX найти очень сложно!