bootstrap-datepicker-Feld leert nach Auswahl aktuelle Datum

Wenn ich autoclose aktiviert, und ich wählen Sie das Feld aus dem Kalender, der ist schon gewählt, es leert das Feld und schließt dann den datepicker als erwartet. Wie kann ich noch die autoclose-Funktion, aber es nicht leer das Feld?

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. Wählen Sie ein Datum.
  3. öffnen Sie den datepicker wieder, wählen Sie den gerade ausgewählten Datum wieder.
  4. Feld ist wieder leer

Dank

InformationsquelleAutor NeedACar | 2014-07-27
  1. 12

    Bootstrap-Datepicker bietet Veranstaltungen, die Sie nutzen können, um Ihr Ziel zu erreichen.

    Hier ist ein Weg, 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, es funktioniert der trick:

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

    • Dies sollte das Standard-Verhalten. Danke!
    • Es ist ein problem, dass der datepicker wird zu klebrig. Wie es funktionieren nur die erste Zeit?
    • Super ,Danke !
    InformationsquelleAutor klenwell
  2. 3

    Scheint dies die meisten generischen Lösung, wie es war das Problem, wenn wir klicken auf die Eingabe von text, und klicken Sie auf eine andere Komponente auf der Webseite, abgesehen von Datum-Auswahl:

    //Date picker 
$('#datepickerInputId').datepicker({
    autoclose : true,
}).on('show', function(e){
    if ( e.date ) {
        $(this).data('stickyDate', e.date);
    } else if($(this).val()){
        /**auto-populate existing selection*/
        $(this).data('stickyDate', new Date($(this).val()));
        $(this).datepicker('setDate', new Date($(this).val()));
    } 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);
    }
});

    freundlich darauf hin wenn eine änderung erforderlich

    InformationsquelleAutor PankajChandankar
  3. 2

    Quick-Fix:
    In der Standardeinstellung @ line 1394, fügen Sie eine neue option, allowDeselection

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

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

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

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

    InformationsquelleAutor bhavya_w
  4. 1

    Nur für den Fall, wenn jemand will, um alle Ereignisse in "einer Zeile" ich bin zu teilen hier der code, den ich verwenden, in ASP.NET MVC Projekt.

    Danke an @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.

    Lesen Sie mehr über diese Veranstaltung hier http://bootstrap-datepicker.readthedocs.org/en/release/events.html

    Und über bootstrap-datepicker.js

    • Ich bin mit MVC, das funktioniert gut für mich. Danke =)
    InformationsquelleAutor Developer
Schreibe einen Kommentar