Bootstrap 5 Datepicker Date Format Example

In this article, we will see the bootstrap 5 datepicker date format example. Here, we will learn about how to change the date format in datepicker using jquery UI. Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.

In the datepicker, the default date format is mm/dd/yy.

So, let's see how to change the date format in bootstrap 5 datepicker, bootstrap 5 datepicker custom date format, and how to change the date format in datepicker.

dateFormat: The format for parsed and displayed dates. For a full list of the possible formats see the formatDate function.


// Initialize the datepicker with the dateFormat option specified:

$( ".selector" ).datepicker({
  dateFormat: "yy-mm-dd"

// Get or set the dateFormat option, after initialization:

// Getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
// Setter
$( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" );


<!doctype html>
<html lang = "en">
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">  
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href=""/>
    <title>Bootstrap 5 Datepicker Date Format Example - Techsolutionstuff</title>  
    <h5 align="center" class="mb-5 mt-5">Bootstrap 5 Datepicker Date Format Example - Techsolutionstuff</h5>
    <div class="container">
        <div class="row">
            <div class="col-sm-12" align="center">
                <p>Date: <input type="text" id="datepicker" size="30" style="margin-right:15px;">
                Format options:
                <select id="format">
                    <option value="mm/dd/yy">Default - mm/dd/yy</option>
                    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
                    <option value="d M, y">Short - d M, y</option>
                    <option value="d MM, y">Medium - d MM, y</option>
                    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
                    <option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy</option>
<script src = ""></script>  
<script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src=""></script>
        $("#format").on("change", function(){
            $("#datepicker").datepicker("option", "dateFormat", $(this).val());




You might also like: