In this article I will explain with an example, how to implement
Bootstrap 3
DatePicker in HTML.
The following article make use of
Bootstrap 3.
HTML Markup
Inside the HTML Markup, first the following CSS files are inherited.
1. bootstrap.min.css
2. bootstrap-datepicker.min.css
And then, the following JS script files are inherited.
1. jquery.min.js
2. bootstrap.min.js
3.bootstrap-datepicker.min.js
The following HTML Markup consists of:
TextBox – For displaying DatePicker.
The TextBox has been assigned with Read Only attribute.
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
<input type="text" id="txtSelectedDate">
Bootstrap 3 DatePicker Plugin implementation
Inside the
jQuery document ready event handler, the TextBox has been applied with
Bootstrap 3
DatePicker plugin.
The
Bootstrap 3
DatePicker plugin has been assigned with following properties:
changeMonth – to show the Month DropDown in Calendar.
changeYear – to show the Year DropDown in Calendar.
format – to set the selected Date in dd/MM/yy date format in TextBox.
<script type="text/javascript">
$(function () {
$("#txtSelectedDate").datepicker({
changeMonth: true,
changeYear: true,
format: "dd/mm/yyyy"
});
});
</script>
Screenshot
![Using Bootstrap 3 DatePicker in HTML]()
Demo
Downloads
