Estoy usando el selector de fecha de arranque de aquí y el validador de arranque de 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'
                    }
                }
            }
        }
    });
});
6
user3411746 28 ago. 2014 a las 01:11

6 respuestas

La mejor respuesta

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

Entonces deberías agregar esto:

1) uso con bootstrap-datetimepicker:

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

2) uso con bootstrap-datepicker:

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

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

16
Arkni 21 oct. 2014 a las 16:51
  $('[name="StartDate"]').datepicker({
            weekStart: 1,
            autoclose: true,
            todayHighlight: true
        }).on('changeDate', function (selected) {

            if ($('[name="StartDate"]').val() == '' || typeof 
    $('[name="StartDate"]').val() == "undefined") {                
                $('[name="EndDate"]').val('').datepicker('setStartDate', null);                
            }
            else {
                $('[name="EndDate"]').val('').datepicker('setDate', new Date());
                $('[name="EndDate"]').datepicker('setStartDate', null);
                startDate = new Date(selected.date.valueOf());
                startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
                $('[name="EndDate"]').datepicker('setDate', startDate);
                $('[name="EndDate"]').datepicker('setStartDate', startDate);
                $('[name="EndDate"]').val('').datepicker('update', '');
            }
        });

        $('[name="StartDate"]').blur(function (selected) {
            if ($('[name="EndDate"]').val() != '' && $('[name="StartDate"]').val() == '' || typeof $('[name="StartDate"]').val() == "undefined") {                
                $('[name="StartDate"]').datepicker('setDate', new Date());
                $('[name="StartDate"]').val('').datepicker('setStartDate', null);
                $('[name="EndDate"]').datepicker('setDate', new Date());
                $('[name="EndDate"]').val('').datepicker('setStartDate', null);
            }
        });

     $("#datepicker2").datepicker({
            autoclose: true,
            todayHighlight: true
        }).datepicker();
0
Irf 7 mar. 2019 a las 18:33

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();    
});
5
Aaron Marton 21 mar. 2016 a las 12:21

La respuesta aceptada arriba 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!

1
tomloprod 21 may. 2015 a las 16:48

Para la mayoría de los casos, las respuestas anteriores deberían funcionar, pero si eventualmente alguna de esas respuestas no funciona para usted, podría intentar esto también:

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

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

¡Buena suerte!

0
Davhec 20 ene. 2017 a las 17:41