To add datepicker with Bootstrap require an external library. You can initialize on the textbox either using an attribute or with a method.
A popup box with a calendar display when clicking on the textbox.
Multiple options, methods, and events are available to control the date picker.
Contents
1. Download and Include
- Download jQuery and Bootstrap.
- Also, need to download Bootstrap date picker which you can download from here.
- Include jQuery, Bootstrap, and Bootstrap datepicker script and CSS files.
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <!-- Bootstrap --> <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet' type='text/css'> <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js' type='text/javascript'></script> <!-- Datepicker --> <link href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css' rel='stylesheet' type='text/css'> <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js' type='text/javascript'></script>
2. Initialize
Create an input element and initialize it using either of two ways –
data-provide="datepicker"attributedatepicker()method
Example
In the example, I am using both of the ways to add datepicker on the textboxes. On the first textbox initialize it using datepicker() and in the second textbox add it using attribute – data-provide="datepicker".
<div class='container' style='margin-top: 100px;'>
<input type='text' class="form-control" id='datepicker' style='width: 300px;' > <br>
<input type='text' class="form-control" data-provide="datepicker" style='width: 300px;' >
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker();
});
</script>
3. Options
Syntax ( data attribute ) –
data-date-[option-name] = value
Syntax ( datepicker() ) –
$(selector).datepicker({ option-name: value });
Some options are –
- startDate – It either takes date or string as a value and disabled the earlier dates according to the specified value.
- endDate – It either takes date or string as a value and set it to disable the date selection after the specified value.
- format – Set date format with the combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy. The default format is
mm/dd/yyyy. - language – It changes the language of the date picker text. The default value is “en” (English). Need to include external language script when changing the language.
- keyboardNavigation – It enables or disables keyboard navigation on the date picker. The default value is
true.
Example
In the example, I set the Portuguese(pt) language with language option using data attribute and other with datepicker() method.
<div class='container' style='margin-top: 100px;'>
<input type='text' class="form-control" data-date-language="pt" id='datepicker' style='width: 300px;' >
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker({
"format": "mm-dd-yy",
"startDate": "-5d",
"endDate": "02-15-2023",
"keyboardNavigation": false
});
});
</script>
4. Methods
Syntax –
$(selector).datepicker("method-name",[value]);
Some methods are –
- show – This displays the picker.
$('#datepicker').datepicker('show');
- hide – This hides the picker.
$('#datepicker').datepicker('hide');
- destroy – This removes the date picker and attached events from the element.
$('#datepicker').datepicker('destroy');
- getDate – It returns the selected date from the picker otherwise null if no date is been selected.
$('#datepicker').datepicker('getDate');
- getStartDate – Return the lower date limit of the date picker.
$('#datepicker').datepicker('getStartDate');
- setStartDate – Set the lower date limit.
$('#datepicker').datepicker('setStartDate', '-5d');
- getEndDate – Return the upper date limit.
$('#datepicker').datepicker('getEndDate');
- setEndDate – Set the upper date limit.
$('#datepicker').datepicker('setEndDate', '+5d');
Example
<div class='container' style='margin-top: 100px;'>
<input type='text' class="form-control" id='datepicker' placeholder='Select date' style='width: 300px;' >
<br/><br/>
<input type='button' id='show' value='show'>
<input type='button' id='setstartdate' value='Set Start Date'>
<input type='button' id='getstartdate' value='Get Start Date'>
<input type='button' id='setenddate' value='Set End Date'>
<input type='button' id='getenddate' value='Get End Date'>
<br/><br/>
<div id='response'></div>
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
// Initialize
$('#datepicker').datepicker();
// show
$('#show').click(function(){
$('#datepicker').datepicker('show');
});
// set start date
$('#setstartdate').click(function(){
$('#datepicker').datepicker('setStartDate', '-5d');
});
// get start date
$('#getstartdate').click(function(){
var startDate = $('#datepicker').datepicker('getStartDate');
$('#response').text('Start Date : ' + startDate);
});
// set end date
$('#setenddate').click(function(){
$('#datepicker').datepicker('setEndDate', '+5d');
});
// get end date
$('#getenddate').click(function(){
var startDate = $('#datepicker').datepicker('getEndDate');
$('#response').text('End Date : ' + startDate);
});
});
</script>
5. Events
Some events are –
- show – This triggers when the date picker is displayed.
- hide – This triggers when the date picker is hidden.
- changeDate – This triggers when a date is selected or change.
- changeMonth – This triggers on change of month.
- changeYear – This triggers on change of year.
Example
$('.datepicker').datepicker().on('show', function(e) {
console.log('show');
}).on('hide', function(e) {
console.log('hide');
}).on('changeDate', function(e) {
console.log('change date');
}).on('changeMonth', function(e) {
console.log('change month');
}).on('changeYear', function(e) {
console.log('change year');
});
6. Conclusion
If you already using Bootstrap library on your project then you can easily add date picker on the element.
To initialize and customize the picker you can either use data attribute or datepicker() method.
You can learn more about this library from here.
If you found this tutorial helpful then don't forget to share.