How to change Bootstrap datepicker with specific date format ?

Last Updated : 26 Sep, 2024

Changing the Bootstrap datepicker to a specific date format allows you to customize how the selected date is displayed. This is done by specifying the desired format using the format option in the datepicker initialization, ensuring the date appears in the preferred style (e.g., "dd/mm/yyyy").

Below are some examples with different date formats.

Example 1: Bootstrap Datepicker with Format dd-mm-yyyy

In this example, we integrate Bootstrap Datepicker with a specific format (dd-mm-yyyy). It uses jQuery to initialize the datepicker on an input field, allowing users to select dates in the specified 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: Bootstrap Datepicker with Format yyyy-mm-dd

In this example we use Bootstrap Datepicker with the date format yyyy-mm-dd. It initializes the datepicker on an input field via jQuery, allowing users to select and display dates in the specified year-month-day 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: Bootstrap Datepicker with Format dd/mm/yyyy

In this example we use Bootstrap Datepicker with the date format dd/mm/yyyy. Using jQuery, it initializes the datepicker on an input field, allowing users to select dates in day/month/year 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: Bootstrap Datepicker with Format yyyy/mm/dd

In this example we use Bootstrap Datepicker with the format yyyy/mm/dd. It initializes the datepicker using jQuery on an input field, allowing users to select dates in the year/month/day format for easier input.

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:

How to setting up Datepicker in Bootstrap ?

vrushaket

Improve

Article Tags :

How to change Bootstrap datepicker with specific date format ?

Example 1: Bootstrap Datepicker with Format dd-mm-yyyy

Example 2: Bootstrap Datepicker with Format yyyy-mm-dd

Example 3: Bootstrap Datepicker with Format dd/mm/yyyy

Example 4: Bootstrap Datepicker with Format yyyy/mm/dd

Similar Reads

Thank You!

What kind of Experience do you want to share?