javascript - posteriores - laravel bootstrap 4 datepicker

¿Cómo evita que bootstrap-datepicker borre el valor existente de la entrada si no se selecciona una fecha?

Question

Tengo un div con la fecha de nacimiento del usuario rellenada previamente con php:

<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>

El 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 se configura y funciona correctamente, sin embargo, cuando la entrada "dob" se enfoca y pierde el foco sin realizar una selección de fecha, borra el valor que se completó previamente.

Sin embargo, esto no sucede si se ha seleccionado una fecha a través del selector de fechas y luego la entrada se enfoca y se pierde.

¿Cómo se puede mantener el valor rellenado previamente en el campo si alguien hace clic en él?

Editar: La primera vez que realiza una selección de fecha, borra el valor rellenado previamente, pero no inserta la fecha seleccionada hasta que realice una selección de fecha por segunda vez.

Actualización: Código de trabajo actualizado!

Answer 1

Cuando jQuery llama a un controlador, esta palabra clave es una referencia al elemento donde se entrega el evento. Además, una cadena no vacía se evaluará como verdadera . Basado en estos hechos, simplemente haga una verificación en el controlador de eventos. Ver código de ejemplo a continuación.

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

NOTA: Por eficiencia y legibilidad en el ejemplo de código anterior, se comprueba el valor de la propiedad DOM, en lugar de envolverlo en un objeto jQuery y llamar a val () en él ($ (this) .val ()). Esta es una mejora menor, pero es una buena práctica ser lo más compacto / simple posible.

Answer 2

Establezca el valor del análisis de fuerza en false: forceParse: false

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

Answer 3

No estoy seguro de que funcione en php, pero para mvc tuve el mismo problema de que Bootstrap borraría el valor si el control se enfocara y perdiera el enfoque sin hacer una selección de fecha.

Encontré que Bootstrap borra el valor ya que no reconoce el valor establecido por

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

Estoy trabajando con bootstrap v3.1.1 y el siguiente código funcionó para mí

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

para rellenar el control selector de fecha. De esta manera, Bootstrap reconoce la fecha y no la borra si el control se enfoca y pierde.

Answer 4

No puedo decirlo con seguridad sin más ejemplos, pero el problema probablemente es que la cadena $this->swimmers->dob le está dando a la entrada no es reconocida como un formato de fecha por bootstrap-datepicker. Puede definir el formato de fecha que utiliza agregando el atributo de data-date-format a su entrada.

Por ejemplo, si estaba usando una fecha con formato MySQL o el objeto DateTime de PHP con el $date->format(''Ym-d'') , podría usar:

<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>

Answer 5

Otra solución es definir las opciones a nivel global:

$(''.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;

Ahora, cuando se usa el método de actualización, el selector de fechas no pierde opciones.

Answer 6

Tuve un problema similar cuando un usuario hizo clic en la misma fecha dos veces. El campo "alternará" entre la fecha en la que se hizo clic y un campo en blanco. Básicamente, no quería que estuviera vacío en ningún momento, así que así es como resolví eso, en parte gracias a la respuesta de Waqas:

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);
    }
});

Eso lo mantiene relativamente autocontenido, al almacenar el último valor de fecha en esa instancia del selector de fecha y no se borra la entrada.

Sé que resolviste este problema, pero pensé que este fragmento podría ser útil para alguien más en una situación similar.