Handcrafted with and a lot of by @nghuuphuoc
Hire me
← Examples
The following example demonstrates how to use FormValidation with the pickadate plugin.
<!-- Include pickadate --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.3/themes/default.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.3/themes/default.date.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.3/themes/default.time.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.3/picker.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.3/picker.date.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.3/picker.time.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.3/legacy.js"></script> <form id="pickDateForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Date of birth</label> <div class="col-xs-5"> <input type="text" class="form-control" name="dob" id="dob" /> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-3"> <button type="submit" class="btn btn-default">Validate</button> </div> </div> </form> <script> $(document).ready(function() { $('#dob').pickadate({ format: 'mm/dd/yyyy', formatSubmit: 'mm/dd/yyyy', hiddenName: true }); $('#dob') .pickadate('picker') .on('render', function() { /** * http://amsul.ca/pickadate.js/api.htm#events-callbacks * Revalidate the date of birth field */ $('#pickDateForm').formValidation('revalidateField', 'dob'); }); $('#pickDateForm').formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, excluded: ':disabled', fields: { dob: { validators: { notEmpty: { message: 'The date of birth is required' }, date: { format: 'MM/DD/YYYY', message: 'The date of birth is not a valid date' } } } } }); }); </script>