Supporting multiple date formats
← Examples
The built-in date validator provides a handy tool when we need to validate a date. It supports various formats of date with different separator, such as MM/DD/YYYY or YYYY-MM-DD. But there's only one format supported at the same time.
In some cases, you want the field to accept multiple formats such as DD.MM.YYYY and DD.MM.YY. The first format is supported by date validator, but the second one isn't.
This example shows how to do this by using the callback validator and the momentjs library.
The momentjs library provides isValid() method to check if a date follows by given format:
moment('2015-10-20', 'YYYY-MM-DD', true).isValid(); // true
moment('2015-20-10', 'YYYY-MM-DD', true).isValid(); // false
moment('20.10.15', 'DD.MM.YY', true).isValid(); // true
moment('2015.20.10', 'DD.MM.YY', true).isValid(); // false The third parameter of moment() constructor HAVE to set as true to ensure that the input has the given format exactly
<script src="//oss.maxcdn.com/momentjs/2.8.2/moment.min.js"></script>
<form id="profileForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Birthday</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="birthday" placeholder="DD.MM.YYYY or DD.MM.YY" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
birthday: {
validators: {
callback: {
message: 'The birthday is not valid',
callback: function(value, validator, $field) {
if (value === '') {
return true;
}
// Check if the value has format of DD.MM.YYYY or DD.MM.YY
return moment(value, 'DD.MM.YYYY', true).isValid()
|| moment(value, 'DD.MM.YY', true).isValid();
}
}
}
}
}
});
});
</script>