In this article I will explain with an example, how to set dd/MM/yyyy Date format in Bootstrap DatePicker (Calendar).
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 and Bootstrap DatePicker implementation
The following HTML Markup consists of a TextBox which has been made Read Only.
Inside the jQuery document ready event handler, the TextBox has been applied with Bootstrap DatePicker plugin.
The Bootstrap DatePicker plugin has been assigned following properties:
format – dd/mm/yyyy
The Bootstrap DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.glyphicon-calendar
{
font-size: 15pt;
}
.input-group
{
width: 180px;
margin-top:30px;
}
</style>
</head>
<body>
<!-- Bootstrap -->
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
<!-- 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 -->
<script type="text/javascript">
$(function () {
$('#txtDate').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
<div class='container'>
<div class="input-group">
<input id="txtDate" type="text" class="form-control date-input" readonly="readonly" />
<label class="input-group-btn" for="txtDate">
<span class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</label>
</div>
</div>
</body>
</html>
Screenshot
![Set dd/MM/yyyy Date format in Bootstrap DatePicker]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
