Playing with Bootstrap Datepicker
← ejemplos
The following example illustrates an usage of FormValidation with the Bootstrap Datepicker plugin.
Basic example
<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
/**
* Override feedback icon position
* See http://formvalidation.io/ejemplos/adjusting-feedback-icon-position/
*/
#eventForm .form-control-feedback {
top: 0;
right: -15px;
}
</style>
<form id="eventForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Event</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Date</label>
<div class="col-xs-5 date">
<div class="input-group input-append date" id="datePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</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() {
$('#datePicker')
.datepicker({
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#eventForm').formValidation('revalidateField', 'date');
});
$('#eventForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
date: {
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
message: 'The date is not a valid'
}
}
}
}
});
});
</script>
Embedding a date picker
It's possible for Bootstrap Datepicker to embed a picker right on the page without attaching it to particular input field.
In order to validate the selected date, firstly we need create a hidden input to keep the selected date:
<div id="embeddingDatePicker"></div>
<input type="hidden" id="selectedDate" name="selectedDate" />
We then add validator rules for the selectedDate
field, don't forget to set
excluded: false to the field (because it's hidden
so it will be ignored by default):
$('#eventForm').formValidation({
framework: 'bootstrap',
icon: {
...
},
fields: {
selectedDate: {
// The hidden input will not be ignored
excluded: false,
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
message: 'The date is not a valid'
}
}
}
}
});
Finally, after choosing a date, you need to set the selected date to the hidden field, and revalidate it:
$('#embeddingDatePicker')
.datepicker({
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Set the value for the date input
$("#selectedDate").val($("#embeddingDatePicker").datepicker('getFormattedDate'));
// Revalidate it
$('#eventForm').formValidation('revalidateField', 'selectedDate');
});
You can try it with the following live form:
<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
/**
* Override feedback icon position
* See http://formvalidation.io/ejemplos/adjusting-feedback-icon-position/
*/
#eventForm .form-control-feedback {
top: 0;
right: -15px;
}
</style>
<form id="eventForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Event</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Date</label>
<div class="col-xs-5 date">
<div id="embeddingDatePicker"></div>
<input type="hidden" id="selectedDate" name="selectedDate" />
</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() {
$('#embeddingDatePicker')
.datepicker({
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Set the value for the date input
$("#selectedDate").val($("#embeddingDatePicker").datepicker('getFormattedDate'));
// Revalidate it
$('#eventForm').formValidation('revalidateField', 'selectedDate');
});
$('#eventForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
selectedDate: {
// The hidden input will not be ignored
excluded: false,
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
message: 'The date is not a valid'
}
}
}
}
});
});
</script>
Setting date in a range
Since Bootstrap Datepicker provides startDate
and endDate
options, and the date validator supports min
and max
options, we can set a date range easily.
The following example asks to enter a date between 01/01/2010 and 12/30/2020.
<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
/**
* Override feedback icon position
* See http://formvalidation.io/ejemplos/adjusting-feedback-icon-position/
*/
#dateRangeForm .form-control-feedback {
top: 0;
right: -15px;
}
</style>
<form id="dateRangeForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Date</label>
<div class="col-xs-5 date">
<div class="input-group input-append date" id="dateRangePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</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() {
$('#dateRangePicker')
.datepicker({
format: 'mm/dd/yyyy',
startDate: '01/01/2010',
endDate: '12/30/2020'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#dateRangeForm').formValidation('revalidateField', 'date');
});
$('#dateRangeForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
date: {
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
min: '01/01/2010',
max: '12/30/2020',
message: 'The date is not a valid'
}
}
}
}
});
});
</script>
Auto closing the date picker
If you want to close the date picker immediately right after choosing a date, you need to
set the autoclose
option to true
:
$('#datePicker')
.datepicker({
autoclose: true, // It is false, by default
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
...
});
<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
/**
* Override feedback icon position
* See http://formvalidation.io/ejemplos/adjusting-feedback-icon-position/
*/
#eventForm .form-control-feedback {
top: 0;
right: -15px;
}
</style>
<form id="eventForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Event</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Date</label>
<div class="col-xs-5 date">
<div class="input-group input-append date" id="datePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</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() {
$('#datePicker')
.datepicker({
autoclose: true,
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#eventForm').formValidation('revalidateField', 'date');
});
$('#eventForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
date: {
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
message: 'The date is not a valid'
}
}
}
}
});
});
</script>