Playing with pickadate
← ejemplos
The following example demonstrates how to use FormValidation with the pickadate plugin.
You should look at the basic principles when integrating FormValidation with
other plugins
<!-- 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>