webentwicklung-frage-antwort-db.com.de

Bootstrap datepicker wird nach der Datumsauswahl nicht automatisch geschlossen

Ich benutze die neuesten Bootstrap datepicker.js. Alles funktioniert gut, außer wenn ich ein Datum aus dem Dropdown-Menü auswähle, wird es nicht automatisch geschlossen. Ich habe im Web gesucht und versucht, die folgende Funktion in meinem Javascript wie folgt zu verwenden: 

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

wenn ich jedoch Google Chrome Dev-Tools verwende, wurde mir klar, dass ev.viewmode nicht definiert war. Ich bin nicht sicher, wie ich vorankommen soll. 

javascriptjquerytwitter-bootstrapdatepicker
19
AlliceSmash

Versuche dies:

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

Update:

autoclose funktioniert gut, wenn Sie die auf github vorhandene aktualisierte Version von datepicker verwenden:

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

20
Mukesh Chapagain

Ich habe autoclose hinzugefügt: true, (mit Semikomma am Ende und es funktioniert)

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

Keines der oben genannten Verfahren hat für mich funktioniert, aber die Überschreibung der Standardeinstellung von Datepicker funktionierte wie ein Charme und ist ein Einzeiler

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

Versuche dies:

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

Wenn Sie über mehrere Textfelder verfügen, für die Sie datepicker angewendet haben, kann die alte Lösung das Problem verursachen Versuchen Sie es stattdessen mit

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

Achten Sie darauf, https://github.com/eternicode/bootstrap-datepicker/issues/500

Hinweis: Vergessen Sie nicht, wir verwenden den Class-Selector von Jquery, damit Sie Sie müssen die datepicker-Klasse auf Ihr Textfeld anwenden.

7
Aniket Bhansali

Für mich stellte sich heraus, dass dies ein Tippfehler in der Bootstrap-Datepicker-Dokumentation ist. Anstelle von "autoclose: true" ist es "autoClose: true".

Ich hoffe es hilft.

2
Nick Verheijen
  1. Öffnen Sie einfach die bootstrap-datepicker.js
  2. find: var defaults = $ .fn.datepicker.defaults (Zeile 1391 in meinem Fall)
  3. set autoclose: true

Speichern und aktualisieren Sie Ihr Projekt und dies sollte funktionieren.

2
user3615318

// 10000% work Wechseln Sie zur Datei bootstrap-datepicker.js 

Suche nach diesem:

'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)
            }]
        ];
    },
0
doshi smit

Das funktioniert für mich.

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

Wenn Sie mit der Standard-Datumsauswahl der Klasse über das Div fahren. Die Kalendersteuerung wird angezeigt. Am Mouseleave wird es verschwinden.

 $(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" });
        });
    });
0
Tumelo Moropane