bootstrap-datepicker leert Feld nach der Auswahl des aktuellen Datums

Question

Wenn ich autoclose aktiviert habe, und ich wähle das Feld aus dem Kalender, der bereits gewählt ist, leert es das Feld und schließt dann den Datepicker wie erwartet. Wie kann ich immer noch die autoclose Funktion haben, aber nicht das Feld leer?

Blick auf die Demo für ein Beispiel, http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&autoclose=on&keyboardNavigation=on&forceParse=on#sandbox

1. Stellen Sie sicher, Autoclose ist auf
2. Datum wählen.
3. Öffnen Sie den Datumsauswahl erneut, wählen Sie das aktuell ausgewählte Datum erneut aus.
4. Feld leer wieder

Dank

Answer 1

Bootstrap bietet Datepicker events, dass Sie Ihr Ziel erreichen nutzen können.

Hier ist eine Möglichkeit, es zu tun:

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

$('#sandbox-container input').on('show', function(e){ 
    if (e.date) { 
     $(this).data('stickyDate', e.date); 
    } 
    else { 
     $(this).data('stickyDate', null); 
    } 
}); 

$('#sandbox-container input').on('hide', function(e){ 
    var stickyDate = $(this).data('stickyDate'); 

    if (!e.date && stickyDate) { 
     $(this).datepicker('setDate', stickyDate); 
     $(this).data('stickyDate', null); 
    } 
}); 

Nicht unbedingt die eleganteste, aber wie man hier sehen kann, tut es den Trick:

http://jsfiddle.net/klenwell/LcqM7/ (getestet in Chrome)

Answer 2

Nur für den Fall, dass jemand alle Ereignisse in "einer Zeile" implementieren möchte, teile ich hier den Code, den ich in ASP.NET MVC Projekt verwende.

Und danke @klenwell für seine Lösung!

$('#ExpectedEndingTimeDataPicker').datepicker({ 
    startDate: "@Model.ExpectedEndingTimeAsString", 
    language: "@Model.CurrentCultere2Letters", 
    autoclose: true, 
    todayHighlight: true, 
    format: "@Model.CurrentDateFormat" 
}).on('changeDate', function (e) {   
    RecalculateEstimationDate(); 
}).on('show', function (e) { 
    if (e.date) { 
     $(this).data('stickyDate', e.date); 
    } 
    else { 
     $(this).data('stickyDate', null); 
    } 
}).on('hide', function (e) { 
    var stickyDate = $(this).data('stickyDate'); 
    if (!e.date && stickyDate) { 
     $(this).datepicker('setDate', stickyDate); 
     $(this).data('stickyDate', null); 
    } 
}); 

Beachten Sie, dass Model ist ASP.NET MVC-Modell. hier http://bootstrap-datepicker.readthedocs.org/en/release/events.html

Und über Bootstrap-picker

Sie können mehr über diese Veranstaltung lesen.js

• Repo: https://github.com/eternicode/bootstrap-datepicker/
• Demo: http://eternicode.github.io/bootstrap-datepicker/
• Docs: http://bootstrap-datepicker.readthedocs.org/
• Gespaltene von http://www.eyecon.ro/bootstrap-datepicker

Answer 3

Quick Fix: In den Standardeinstellungen @ line 1394, fügen Sie eine neue Option , allowDeselection

var defaults = $.fn.datepicker.defaults = { 
    allowDeselection: false, 
    ... 
}; 

In der _toggle_multidate Funktion @ Linie 1015, ändern Sie die "else if (ix !== -1)" Aussage zu:

else if (ix !== -1 && this.o.allowDeselection){ 
      this.dates.remove(ix); 
     } 

Referenz: https://github.com/eternicode/bootstrap-datepicker/issues/816

Answer 4

Dies scheint allgemeinste Lösung zu sein, da es Problem war, als wir auf Eingabetext klicken und Klicken Sie neben der Datumsauswahl auf eine andere Komponente auf der Webseite:

Bitte geben Sie an, wenn eine Änderung erforderlich ist