How to change Bootstrap datepicker with specific date format ?

23 Jul, 2021
DatePicker is a component of Bootstrap Framework that allows users to select the date by providing a user-friendly interface. Using DatePicker, we can select a date from the DatePicker dialog which is far better than manually typing the date in the input field.
Also, we can format the DatePicker as per the requirements. DatePicker provides various date formats like  dd/mm/yyyy, yyyy-mm-dd, dd/mm/yyyy, dd-mm-yyyy, etc out of which one can be selected which best fits the requirements. To use this custom date formats we need to set this format in jQuery DatePicker.
Below are some examples with different date formats.
Example 1:The following is the DatePicker with dd-mm-yyyy format.
HTML
<!DOCTYPE html><html>  <head>    <link      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"      rel="stylesheet"    />    <link      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"      rel="stylesheet"    />    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js">    </script>  </head>  <body>    <input type="text" class="date form-control" style="width: 200px" />     <script type="text/javascript">      $(".date").datepicker({        format: "dd-mm-yyyy",      });    </script>  </body></html>
Output:
Example 2: The following is the datePicker with yyyy-mm-dd format.
HTML
<!DOCTYPE html><html>  <head>    <link      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"      rel="stylesheet"    />    <link      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"      rel="stylesheet"    />    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js">    </script>  </head>  <body>    <input type="text" class="date form-control" style="width: 200px" />     <script type="text/javascript">      $(".date").datepicker({        format: "yyyy-mm-dd",      });    </script>  </body></html>
Output:
Example 3: The following is the datePicker with dd/mm/yyyy format.
HTML
<!DOCTYPE html><html>  <head>    <link      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"      rel="stylesheet"    />    <link      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"      rel="stylesheet"    />    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js">    </script>  </head>  <body>    <input type="text" class="date form-control" style="width: 200px" />     <script type="text/javascript">      $(".date").datepicker({        format: "dd/mm/yyyy",      });    </script>  </body></html>
 Output:
Example 4: The following is the datePicker with yyyy/mm/dd format. 
HTML
<!DOCTYPE html><html>  <head>    <link      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"      rel="stylesheet"    />    <link      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"      rel="stylesheet"    />    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js">    </script>  </head>  <body>    <input type="text" class="date form-control" style="width: 200px" />     <script type="text/javascript">      $(".date").datepicker({        format: "yyyy/mm/dd",      });    </script>  </body></html>
Output:
vrushaket
Bootstrap-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.