Bootstrap datepicker and bootstrap validator

Question

I am using the bootstrap datepicker from here and the bootstrap validator from here. Also I am using bootstrap v3.1.1.

After selecting a date from datepicker the va

Answer 1

Above accepted answer didn't work me. What worked for me was very simple.

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

Hope this helps!

Answer 2

For most of cases answers above should work, but if eventually anythose answers ain't working for you, could try this too:

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

Main idea in this script is to force validations by "setting" and after "unsetting" the focus. I understand that would be similar to emulate the normal events that permit to run validations.

Good luck!

Answer 3

You must also include the latest validation cdn into your project:

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js

Answer 4

When using BootstrapValidator with Bootstrap-datetimepicker or Bootstrap-datepicker, you should revalidate the date field.

So you should add this:

1) using with bootstrap-datetimepicker :

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

2) using with bootstrap-datepicker :

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

See the datetimepicker example for more information.

Answer 5

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

Answer 6

Somehow, after selecting a date, datepicker() loses focus of the date field and none of the validator plugins can see the date input field as filled (valid). As a conclusion, a simple .focus() does the trick.

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