Bootprap datepicker не закрывается автоматически после выбора даты

Я использую последний Bootstrap datepicker.js. Все работает отлично, за исключением того, что когда я выбираю дату из раскрывающегося списка, она автоматически не закрывает ее. Я искал веб и пытался использовать следующую функцию в своем javascript, как показано ниже:

 $('#selectDate').datepicker({
    autoclose: true
}).on('changeDate', function (ev) {
    (ev.viewMode == 'days') ? $(this).datepicker('hide') : '';      
});

но когда я использую инструменты Google Chrome Dev, я понял, что ev.viewmode был undefined. Я не уверен, как двигаться вперед.

Ответы

Ответ 1

Попробуйте следующее:

$('#selectDate').datepicker()
.on('changeDate', function(ev){                 
    $('#selectDate').datepicker('hide');
});

Update:

autoclose отлично работает, когда вы используете обновленную версию datepicker, присутствующую в github:

https://github.com/eternicode/bootstrap-datepicker

Ответ 2

Я добавил autoclose: true, (с запятой в конце и он работает)

 $('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    autoclose: true,
})

Ответ 3

Ни одно из вышеперечисленных не работало для меня, однако переопределение параметра по умолчанию datepicker работало как шарм и является однострочным:

$.fn.datepicker.defaults.autoclose = true;

Ответ 4

Попробуйте следующее:

$('#selectDate').datepicker().on('changeDate', function(ev)
{                 
     $('.datepicker').hide();
});

Ответ 5

Если у вас есть несколько текстовых полей, для которых вы применили средство выбора даты, то старое решение может вызвать проблемы, попробуйте вместо этого,

$('.datepicker').datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
}).on('changeDate', function (ev) {
     $(this).datepicker('hide');
});

Посмотрите это, https://github.com/eternicode/bootstrap-datepicker/issues/500

Примечание: не забывайте, что мы используем селектор классов jquery, поэтому вам нужно применить класс datepicker к вашему текстовому полю.

Ответ 6

  • Просто откройте bootstrap-datepicker.js
  • find: var defaults = $.fn.datepicker.defaults(Строка 1391 в моем случае)
  • set autoclose: true

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

Ответ 7

Для меня это оказалось опечаткой в ​​документации bootstrap-datepicker. Вместо "autoclose: true" это "autoClose: true".

Надеюсь, что это поможет.

Ответ 8

//10000% работы Перейдите в файл bootstrap-datepicker.js

Найти это:

'mousedown touchstart': $.proxy(function(e){
                    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        this.element.find(e.target).length ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )) {
                        this.hide();  //remove this
                    }
                }, this)
            }]
        ];
    },

Ответ 9

Когда вы наводите курсор мыши на элемент div с помощью класса defaultdatepicker. Появится элемент управления календаря. На Mouseleave он исчезнет.

 $(document).on("focus", ".defaultdatepicker", function () {

        $(this).datepicker({
            format: 'dd/mm/yyyy',
            todayHighlight: 'TRUE',
            autoClose: true,
        });

        $('#datepicker').css({ "opacity": "1" });
    });

    $('.defaultdatepicker').on('mouseleave', function () {
        $('.datepicker').fadeOut(function () {
            $('.formattedStartDate').attr('class', 'formattedStartDate');

            $('#datepicker').css({ "opacity": "0" });
        });
    });

Ответ 10

Это работает для меня.

$(".date-picker").datepicker( {
    format: "yyyy-mm-dd",
}).on('change', function (ev) {
    $(this).datepicker('hide');
});

Ответ 11

Это сработало для меня

$(".date-picker").change(function() { 
    setTimeout(function() {
        $(".date-picker").datepicker('hide'); 
        $(".date-picker").blur();
    }, 50);
});