In this article I will explain with an example, how to set dd/MM/yyyy Date format in
Bootstrap DatePicker (Calendar) in HTML.
The
Bootstrap DatePicker supports multiple Date formats and in order to set the dd/MM/yyyy Date format, the
format property needs to be set.
HTML Markup
Inside the HTML Markup, first the following CSS files are inherited.
1. bootstrap.min.css
2. bootstrap-datepicker.css
And then, the following JS script files are inherited.
1. jquery.min.js
2. bootstrap.min.js
3. bootstrap-datepicker.js
The following HTML Markup consists of:
TextBox – For displaying DatePicker.
The TextBox has been assigned with Read Only attribute.
SPAN – For displaying
Bootstrap Glyphicon Calendar Icon.
<!-- Bootstrap -->
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap -->
<!-- Bootstrap DatePicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap DatePicker -->
<div class="form-group" style="margin: 30px">
<div class="input-group date" style="width: 200px">
<input type="text" name="selectedDate" id="txtDate" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
Bootstrap DatePicker Plugin implementation
Inside the
jQuery document ready event handler, the TextBox has been applied with
Bootstrap DatePicker plugin.
The
Bootstrap DatePicker plugin has been assigned with following property:
format – dd/mm/yyyy
The
Bootstrap DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
<script type="text/javascript">
$(function () {
$('#txtDate').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Screenshot
![Set dd/MM/yyyy Date format in Bootstrap DatePicker]()
Demo
Downloads
