Датапикер начальной загрузки скрывается после выбора


97

Как скрыть календарь после выбора даты? Есть ли конкретная функция, которую я могу использовать? Мой код ниже:

$('#dp1').datepicker({
    format: 'mm-dd-yyyy',
    startDate: '-15d',
    autoclose: true,
    endDate: '+0d' // there's no convenient "right now" notation yet
});

Любая помощь будет оценена.


6
Почему это не поведение библиотеки по умолчанию?
спорт

Ответы:


157

Вы можете использовать событие, changedate()чтобы отслеживать, когда дата изменяется, вместе с datepicker('hide')методом, чтобы скрыть datepickerпосле выбора:

$('yourpickerid').on('changeDate', function(ev){
    $(this).datepicker('hide');
});

Демо

ОБНОВИТЬ

Это была ошибка autoclose: true. Эта ошибка исправлена ​​в последней версии мастера. ПОСМОТРЕТЬ COMMIT. Получите последний код отGitHub


7
Я бы порекомендовал дополнительно проверить, является ли текущий режим просмотра «дней»: if (ev.viewMode === 'days') {$(this).datepicker('hide');}поскольку вы, вероятно, не захотите скрывать указатель даты после выбора месяца или года}
Turan

1
Похоже, что для autoclose по умолчанию установлено значение false ... $(".date").datepicker({... autoclose: true, ... });отлично работает !!!
Дэни

45

Если это кому-то поможет, то версия 2.0 загрузчика datepicker больше не работает с принятым ответом.

Вот как у меня это получилось:

$('yourpickerid').datepicker({
    format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
    $(this).datepicker('hide');
});

См. Http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate


Есть версия 2? Я считаю v1.6.4 последней версией на Github
garryp

Используйте автоматическое закрытие (см. Ответ @Salim или обновленный принятый ответ) вместо обработки события вручную. Если вы скрываете указатель даты при изменении даты, то попытка ввести дату может вызвать нежелательное поведение.
Lopsided


3

Если вы хотите изменить поведение календаря в целом и глобально, попробуйте отредактировать функцию Datepicker (в моем примере это была строка 82),

из

    this.autoclose = false;

к

    this.autoclose = true;

У меня все заработало, так как я хотел, чтобы все экземпляры календаря вели себя одинаково.


2
Не нужно изменять свойства по умолчанию в библиотеке js. Вы можете передать его как свойство объекта функции при ее вызове. Пример: $ ('# dob'). Datepicker ({формат: 'дд / мм / гггг', autoclose: true});
Zeeshan

3

Проблема может быть остановлена, заблокировав событие скрытия для элемента ввода с помощью этой строки:

var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
    e.preventDefault();
    e.stopPropagation();
});


Спасибо друг ! Я злился, потому что ввод был скрыт после выбора даты, и это решило мою проблему. Ура!
spacebiker

3
  1. Просто откройте bootstrap-datepicker.js
  2. найти : var defaults = $.fn.datepicker.defaults
  3. устанавливать autoclose: true

Сохраните и обновите свой проект, и это должно быть сделано.


2

В бутстрапе 4 используйте "autoHide: true"

$('#datepicker1').datepicker({
    autoHide: true,
    format: 'mm-yyyy',
    endDate: new Date()
});

Хороший ответ Анкит
Сингх

1

Закройте datetimepicker при выборе даты (datetimepicker показывает дату со временем)

$('.datepicker').datepicker({
    autoclose: true,
    closeOnDateSelect: true
}); 

1
$('yourpickerid').datetimepicker({
           pickTime: false
}).on('changeDate', function (e) {
           $(this).datetimepicker('hide');
});

0

Получилось отличное решение:

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
    if(e.viewMode === 'days')
        $(this).blur();
});

0
$('.datepicker').datepicker({
    autoclose: true
}); 

Другой ответ на этот вопрос точно такой же, как и ваш. OP также имеет это autoclose: trueв своем примере кода.
93196.93

0

Я перешел на datetimepicker формат и на "ДД / ММ / ГГГГ"

$("id").datetimepicker({
    format: 'DD/MM/YYYY',
}).on('changeDate', function() {
    $('.datepicker').hide();
});

0

По крайней мере, в версии 2.2.3, которую я использую, вы должны использовать autoCloseвместо autoclose. Регистр букв имеет значение.


0

Вы можете изменить исходный код, bootstrap-datepicker.js . Добавить this.hide();как ne

  if (this.viewMode !== 0) {
    this.date = new Date(this.viewDate);
    this.element.trigger({
        type: 'changeDate',
        date: this.date,
        viewMode: DPGlobal.modes[this.viewMode].clsName
    });
    this.hide();//here
 }

0

Проблема с часами все еще отображается, даже если я написал формат: «ГГГГ-ММ-ДД» ,

Я должен был установить pickTime: falseи после изменения- > скрыть, я должен был сфокусироваться-> показать

$('#VBS_RequiredDeliveryDate').datetimepicker({
  format: 'YYYY-MM-DD',
  pickTime: false
});

$('#VBS_RequiredDeliveryDate').on('change', function(){
    $('.datepicker').hide();
});

$('#VBS_RequiredDeliveryDate').on('focus', function(){
    $('.datepicker').show();
});

0

Для средства выбора даты и времени

$('yourpickerid').datetimepicker({
        format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
        $(this).datetimepicker('hide');
});

0

Используйте это для datetimepicker, он отлично работает

$('#Date').data("DateTimePicker").hide();

0

Я не видел этого, но вот что исправило для меня:

switchOnClick: true
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.