wake-up-neo.com

Wie verhindern Sie, dass Bootstrap-datepicker den vorhandenen Wert aus der Eingabe löscht, wenn kein Datum ausgewählt ist?

Ich habe ein Div mit einem Geburtsdatum des Benutzers, das mit PHP ausgefüllt ist:

<div id="datepicker" class="input-group date">
    <label for="dob">Date of Birth</label> <input type="text" class="form-control" id="dob" name="dob" value="<?php $date = new DateTime($this->swimmers->dob); echo $date->format('d/m/Y');?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

Das Javascript:

<script>     
    $('.container .input-group.date').datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
    });
</script>

Bootstrap ist zwar eingerichtet und funktioniert einwandfrei. Wenn die "dob" -Eingabe jedoch den Fokus verliert und den Fokus verliert, ohne eine Datumsauswahl zu treffen, wird der Wert gelöscht, der zuvor ausgefüllt wurde.

Dies geschieht jedoch nicht, wenn über den Datepicker ein Datum ausgewählt wurde und die Eingabe dann den Fokus verliert.

Wie kann der vorbelegte Wert im Feld bleiben, wenn jemand darauf klickt?

Bearbeiten: Wenn Sie zum ersten Mal eine Datumsauswahl treffen, wird der vorgefüllte Wert gelöscht, das ausgewählte Datum jedoch erst eingefügt, wenn Sie eine zweite Datumsauswahl treffen.

Update: Arbeitscode aktualisiert!

16
nikmav

Ohne mehr als ein Beispiel kann ich es nicht genau sagen, aber das Problem ist wahrscheinlich, dass die $this->swimmers->dob-Zeichenfolge, die Sie der Eingabe geben, von bootstrap-datepicker nicht als Datumsformat erkannt wird. Sie können das verwendete Datumsformat definieren, indem Sie Ihrer Eingabe das data-date-format-Attribut hinzufügen.

Wenn Sie beispielsweise ein mit MySQL formatiertes Datum oder ein PHP-DateTime-Objekt mit $date->format('Y-m-d') verwenden, können Sie Folgendes verwenden:

<div id="datepicker" class="input-group date">
    <input type="text" class="form-control" id="dob" name="dob" value="<?php echo $this->swimmers->dob;?>" data-date-format="yy-mm-dd"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
2
Steve H

Setzen Sie den Parser-Force-Wert auf false: ForceParse: false

    $(".applyDatepicker").datepicker({
            forceParse: false
    });
35
Datta

Ich bin nicht sicher, ob es in PHP funktioniert, aber für MVC habe ich das gleiche Problem, dass Bootstrap den Wert löscht, wenn das Steuerelement den Fokus erhält und verliert, ohne eine Datumsauswahl vorzunehmen. 

Ich habe festgestellt, dass Bootstrap den Wert löscht, da er den von eingestellten Wert nicht erkennt

$('#dtControl').val(nextMonth);

Ich arbeite mit bootstrap v3.1.1 und der folgende Code hat für mich funktioniert

$('#dtControl').datepicker('setDate', nextMonth);

um das Datepicker-Steuerelement aufzufüllen. Auf diese Weise erkennt Bootstrap das Datum und löscht es nicht, wenn die Kontrolle den Fokus verliert

Ich hatte ein ähnliches Problem, als ein Benutzer zweimal auf dasselbe Datum geklickt hat. Das Feld wechselt zwischen dem angeklickten Datum und einem leeren Feld. Im Grunde wollte ich nicht, dass es zu irgendeinem Zeitpunkt leer ist. Deshalb habe ich das auch gemacht, zum Teil dank Waqas 'Antwort:

var datepickerContainer = $('#datepicker');

datepickerContainer.datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
}).on('show', function() {
    datepickerContainer.datepicker.currentDate = $('input#dob').val(); //update this instance with the current value
}).on('changeDate', function(event) {
    var newDate = $('input#dob').val();
    if (newDate == '' || newDate == null) { //check if the new value is empty - if it is, then just set it back to the last known date for this instance
        datepickerContainer.datepicker('setDate', datepickerContainer.datepicker.currentDate);
    }
});

Dadurch bleibt es relativ unabhängig, indem der letzte Datumswert in dieser Instanz des Datumsauswahlgeräts gespeichert wird und die Eingabe nicht gelöscht wird.

Ich weiß, dass Sie dieses Problem gelöst haben, aber ich dachte mir, dass dieses Snippet jemandem in einer ähnlichen Situation nützlich sein könnte.

1
George Inggs

Wenn jQuery einen Handler aufruft, ist das Schlüsselwort this eine Referenz auf das Element, an das das Ereignis übergeben wird. Außerdem wird ein nicht leerer String zu true ausgewertet. Basierend auf diesen Fakten, überprüfen Sie einfach den Event-Handler. Siehe Beispielcode unten.

            .find( 'input[name=startDate]' )
                .datepicker( {format: 'dd-mm-yyyy'} )
                .on( 'changeDate', function() {
                    if( this.value ) { 
                        << do something >>
                    }
                });

ANMERKUNG: Aus Gründen der Effizienz und Lesbarkeit im obigen Codebeispiel wird die DOM-Eigenschaft value geprüft, anstatt this in ein jQuery-Objekt zu packen und val () darauf aufzurufen. .val ()). Dies ist eine geringfügige Verbesserung, aber es ist eine gute Praxis, so kompakt/einfach wie möglich zu sein.

0

Eine andere Lösung besteht darin, die Optionen auf globaler Ebene zu definieren:

$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;

Wenn Sie jetzt die Update-Methode verwenden, gehen bei datepicker keine Optionen verloren.

0
track3r