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