javascript - eonasdan - Bootstrap datepicker y el validador bootstrap

eonasdan-bootstrap-datetimepicker

Question

Estoy usando el selector de fecha de arranque desde aquí y el validador de arranque desde aquí . También estoy usando bootstrap v3.1.1.

Después de seleccionar una fecha de datepicker, el validador no reacciona. Funciona justo cuando uso el teclado para ingresar una fecha.

Aquí está mi código HTML:

<form id="myForm" method="POST"> 
   <div class="col-lg-3">
     <div class="form-group">
        <input name="endDate" type="text" class="datepicker form-control">
     </div>
   </div>
</form>

En el archivo .js, agregué:

$(document).ready(function () {
  $(''.datepicker'').datepicker();
)};

y para validadores:

$(document).ready(function () {
    $(''#myForm'').bootstrapValidator({
        feedbackIcons: {
            valid: ''glyphicon glyphicon-ok'',
            invalid: ''glyphicon glyphicon-remove'',
            validating: ''glyphicon glyphicon-refresh''
        },
        fields: {
            endDate: {
                validators: {
                    date: {
                        format: ''DD/MM/YYYY'',
                        message: ''The format is dd/mm/yyyy''
                    },
                    notEmpty: {
                        message: ''The field can not be empty''
                    }
                }
            }
        }
    });
});

Answer 1

Al usar BootstrapValidator con Bootstrap-datetimepicker o Bootstrap-datepicker, debe volver a validar el campo de fecha.

Entonces deberías agregar esto:

1) usando con bootstrap-datetimepicker:

$(''.date'')
    .on(''dp.change dp.show'', function(e) {
        // Revalidate the date when user change it
        $(''#myForm'').bootstrapValidator(''revalidateField'', ''endDate'');
});

2) usando con bootstrap-datepicker:

$(''.datepicker'')
    .on(''changeDate show'', function(e) {
        // Revalidate the date when user change it
        $(''#myForm'').bootstrapValidator(''revalidateField'', ''endDate'');
});

Consulte el ejemplo datetimepicker para obtener más información.

Answer 2

La respuesta aceptada anteriormente no me funcionó. Lo que funcionó para mí fue muy simple.

$(''#datefield'').datepicker().on(''changeDate'', function (e) {
         $(''#datefield'').focus();
         $(''#anyotherfield'').focus();
         $(''#datefield'').focus();             
});

¡Espero que esto ayude!

Answer 3

De alguna manera, después de seleccionar una fecha, datepicker () pierde el foco del campo de fecha y ninguno de los complementos del validador puede ver el campo de entrada de fecha como lleno (válido). Como conclusión, un simple .focus () hace el truco.

$(''#datefield'').datepicker({
  //datepicker methods and settings here
}).on(''changeDate'', function (e) {
  $(this).focus();    
});

Answer 4

En la mayoría de los casos, las respuestas anteriores deberían funcionar, pero si eventualmente cualquier respuesta no le funciona, intente esto también:

$(''.datepicker'').change(function () {
        $(this).focus();
        $(this).blur();
    });

La idea principal de este script es forzar las validaciones "configurando" y después de "desarmar" el foco. Entiendo que sería similar emular los eventos normales que permiten ejecutar validaciones.

¡Buena suerte!