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.
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>
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 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 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) |
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...
});
Triggers when the datepicker is displayed.
Triggers when the datepicker is hidden.
Triggers when the datepicker is cleared.
Triggers when the date is changed.
Triggers when the view month is changed from year view.
Triggers when the view year is changed from decade view.
Triggers when the view decade is changed from century view.
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.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to Take Screenshots on Ubuntu 20.04
Ubuntu 18.04 LTS and later versions has...How to Remove a Specific Item from an Array in JavaScript
Use the splice() Method You can use t...Laravel - How to Get .env Variable in Blade and Controller?
In this example, you will learn how to a...How to call a function repeatedly after fixed time interval in jQuery
Use the JavaScript setInterval() method...What is new in Laravel 8?
Hello artisan, I have some good news...