Bootstrap is the most popular, open-source and front-end CSS framework. Bootstrap makes easy to create responsive web design. Bootstrap also provides many jQuery plugins. One of them is Bootstrap-datepicker.
Bootstrap-datepicker is the flexible datepicker widget using Bootstrap. It provides easy to choose date in calender format instead of typing manually. It is also provides many other features like date format, date-range, read only date etc.
In this article, we will use Bootstrap-datepicker in the input date box in the form. To use the Bootstrap, we will add Bootstrap CDN. We also need to include jQuery as Bootstrap depends on jQuery.
Installation
First include bellow CDN files in the <head> tag in the web page It includes jQuery, Bootstrap and Bootstrap-datepicker.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
Create Datepicker field
We have included necessary library CDN files, now we will add input tags which will create datepicker box. Include bellow html tags in the form where you want to create Datepicker.
<form class="form-inline row">
<div class="form-group col-sm-6">
<label for="datepicker" class="col-sm-4">Bootstrap-datepicker</label>
<input type="text" class="form-control col-sm-8" id="datepicker" placeholder="Select a Date" readonly>
</div>
</form>
And add bellow jQuery code just before the end of the </body> tag. This will create datepicker dropdown at input field.
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
Options
Options will be passed in the datepicker method as json as above. Also most of the options can be used as data-attributes in the <input> tag like format can be used as data-date-format or startDate will be used as data-date-start-date.
Here are some of the important options that are available.
| Option | Description | Value type | Available values | Default option |
|---|---|---|---|---|
| autoclose | Whether or not to close the datepicker immediately when a date is selected. | Boolean | false, true | false |
| calendarWeeks | Show the number of weeks. | Boolean | false, true | false |
| disableTouchKeyboard | Disables touch keypad. | Boolean | false, true | false |
| enableOnReadonly | Disables datepicker and can not change field value. | Boolean | false, true | false |
| endDate | Last date that can be selected, must be parsable with format. | String | ||
| format | The date format, combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy. | String | mm/dd/yyyy | |
| startDate | First date that can be selected, must be parsable with format. | String | ||
| showOnFocus | Datepicker will be prevented from showing when the input field associated with it receives focus on false value. | Boolean | false, true | true |
| todayHighlight | Highlight today value. | Boolean | false, true | false |
| weekStart | Day of the week start. 0 (Sunday) to 6 (Saturday) | Integer | 0-6 | 0 |
Methods
Methods can be used in datepicker by calling the datepicker function with a string first argument and followed by any arguments the method takes.
| Method | Description | Argument value |
|---|---|---|
| destroy | Remove the datepicker and its all relative events. | - |
| show | Show the picker. | - |
| hide | Hide the picker. | - |
| update | Update to new date with given argument. | - |
| setDate | Set the local date object. | - |
| getDate | Return a local date object. | - |
| getStartDate | Return a local date object. | - |
| getEndDate | Return a local date object. | - |
| setStartDate | Sets a new lower date limit on the datepicker. | startDate (Date) |
| setEndDate | Sets a new upper date limit on the datepicker. | endDate (Date) |
| setDatesDisabled | Sets the days that should be disabled. | datesDisabled (String|Array) |
| setDaysOfWeekDisabled | Sets the days of week that should be disabled. | daysOfWeekDisabled (String|Array) |
| setDaysOfWeekHighlighted | Sets the days of week that should be highlighted. | daysOfWeekHighlighted (String|Array) |
Events
Datepicker also supports certain events. Events can be used in some cases to pass object to any event handlers.
$('.datepicker').datepicker()
.on(event, function(event) {
// your code goes here...
});
show
Triggers when the datepicker is displayed.
hide
Triggers when the datepicker is hidden.
clearDate
Triggers when the datepicker is cleared.
changeDate
Triggers when the date is changed.
changeMonth
Triggers when the view month is changed from year view.
changeYear
Triggers when the view year is changed from decade view.
changeDecade
Triggers when the view decade is changed from century view.
changeCentury
Triggers when the view century is changed from millennium view.
And that would be it. I hope you liked this article. Any questions or suggestions are most welcome.
