Bootstrap Datepicker nach Auswahl ausblenden

Wie verstecke ich den Kalender, nachdem ein Datum ausgewählt wurde? Gibt es eine bestimmte Funktion, die ich verwenden kann? Mein Code unten:

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

Jede Hilfe wäre dankbar.

Sie können das Ereignis verwenden changedate(), um zu verfolgen, wann das Datum geändert wird, und die datepicker('hide')Methode, um das datepickernach dem Auswählen ausgewählte Element auszublenden :

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

Demo

AKTUALISIEREN

Dies war der Fehler mit autoclose: true. Dieser Fehler wurde im neuesten Master behoben. SEHEN SIE DIE COMMIT. Holen Sie sich den neuesten Code vonGitHub

Wenn es jemandem hilft, funktioniert die Version 2.0 des Bootstrap-Datepickers nicht mehr mit der akzeptierten Antwort.

So habe ich es bei mir zum Laufen gebracht:

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

Siehe http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate

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

Wenn Sie das Verhalten des Kalenders im Allgemeinen global überschreiben möchten, versuchen Sie, die Datepicker-Funktion zu bearbeiten (in meinem Beispiel war es Zeile 82).

von

    this.autoclose = false;

zu

    this.autoclose = true;

Hat für mich gut funktioniert, da ich wollte, dass sich alle meine Kalenderinstanzen gleich verhalten.

Das Problem kann gestoppt werden, indem das Versteckereignis für das Eingabeelement durch diese Zeile blockiert wird:

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

1. Öffnen Sie einfach die bootstrap-datepicker.js
2. finden : var defaults = $.fn.datepicker.defaults
3. einstellen autoclose: true

Speichern und aktualisieren Sie Ihr Projekt und dies sollte reichen.

Verwenden Sie in Bootstrap 4 "autoHide: true".

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

Schließen Sie den datetimepicker, wenn Sie das Datum auswählen (datetimepicker zeigt Datum mit Uhrzeit an).

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

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

Ich habe eine perfekte Lösung:

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

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

Ich habe auf datetimepicker umgestellt und auf 'TT / MM / JJJJ' formatiert.

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

Zumindest in Version 2.2.3, die ich verwende, müssen Sie autoClosestattdessen verwenden autoclose. Brief Fall zählt.

Sie können den Quellcode bootstrap-datepicker.js ändern . Füge this.hide();wie ne hinzu

  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
 }

Ich habe ein Problem mit der Uhr, das immer noch angezeigt wird, auch wenn ich das Format geschrieben habe: 'JJJJ-MM-TT' ,

Ich musste einstellen pickTime: falseund nach dem Ändern-> Verstecken musste ich mich konzentrieren-> zeigen

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

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

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

Für Datetime Picker

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

Verwenden Sie dies für datetimepicker, es funktioniert gut

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

Ich habe das noch nicht erwähnt gesehen, aber das hat es für mich behoben:

switchOnClick: true