If you use Bootstrap as a front-end framework, Bootstrap Validator is a good looking, extensible form validation plug-in. One issue that I come across quite frequently is hooking up a jQuery UI Datepicker field in live or real time. It seems like the bootstrap validator validates based on keyUp or onchange events. A jQuery UI datepicker field doesn’t get reevaluated when a user selects a new date from the picker.

Bootstrap Validator has really excellent documentation. See the Validate a Date for information on date validation. The Datetime Picker Example is probably the most relevant – you can check out the Bootstrap datetime picker plugin here.

To make the jQuery UI datepicker play well with Bootstrap Validator, you need to reevaluate the field based on onselect parameter of the datepicker as illustrated below:

$(function() {
    $( "#date" ).datepicker({
        onSelect: function(){
            $('#formid').bootstrapValidator('revalidateField', 'date');
        }
    });
});
    
$(document).ready(function() {
    $('#formid').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            date: {
                message: 'The date field is required',
                validators: {
                    notEmpty: {
                        message: 'The date field is required and cannot be empty'
                    }
                }
            }
        }
    }).on('success.form.bv', function(e) { 
        submitHandler();
    });
});