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.


Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

OR

1 Comments

  • Image
    Giuseppe
    April 13, 2020 Reply

    Dosen't work!!! Thanks