How to Add Bootstrap-datepicker in your website

1550 views 7 months ago Bootstrap

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.

Author : Harsukh Makwana

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]