How to use moment.js to change date format in jQuery ?

Last Updated : 16 May, 2022

Given a date, we need to change the format of the date using moment.js. To achieve this functionality, we can use moment().format() function.

moment() Function: The moment() function is used to create a moment from a string.

Syntax:

moment(String);

Parameter: It accepts a String as a parameter

Return Value: It returns the moment object.

format() Function: The moment().format() function is used to format the date. The format can be provided in string form which is passed as a parameter to this method.

Syntax:

moment().format(String);

Parameters: This function accepts a single parameter of string type, which defines the format.

Return Value: This function returns the date.

CDN Links:

<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.9.1.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js”></script>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css”>

Approach:

Firstly, add the jQuery, Moment.js, and Bootstrap CDN link to the script or download them from your local machine.
Create an input for the date and button to submit.
Now use the moment() method to convert the date into a moment object.
Use the format() method to change the format of the date, following is the syntax for changing the format of the date to ‘DD-MM-YYYY’.

moment($("#date_val").val()).format('DD-MM-YYYY');

Add some styling to the page using the bootstrap.

Formatting tokens for dates:

Token	Description	Example
YYYY	4-digit year	2022
YY	2-digit year	22
MMMM	Full-length month	March
MMM	3 character month	Mar
MM	The month of the year, zero-padded	03
M	The month of the year	3
DD	Day of the month, zero-padded	02
D	Day of the month	2
Do	Day of the month with numeric ordinal contraction	2nd

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <script type="text/javascript" src= 
        "https://code.jquery.com/jquery-1.9.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"> 
    </script> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> 
</head> 
  
<body> 
    <div class="container row my-2 mx-auto"> 
        <input type="date" data-provide="datepicker" 
            name="date" id="date_val"> 
        <button type="button" id="datebtn" 
            class="btn btn-primary row ml-2"> 
            Primary 
        </button> 
    </div> 
  
    <div class=" w-25"> 
        <ul class="list-group"> 
            <li class="list-group-item "> DD-MM-YYYY : 
                <span id="format1" 
                    class="text-primary"></span> 
            </li> 
            <li class="list-group-item ">DD MMMM YYYY : 
                <span id="format2" 
                    class="text-primary"></span> 
            </li> 
            <li class="list-group-item ">DD/MM/YYYY : 
                <span id="format3" 
                    class="text-primary"></span> 
            </li> 
        </ul> 
    </div> 
    <script type="text/javascript"> 
  
        $("#datebtn").click(function () { 
            var format1 = moment($("#date_val") 
                .val()).format('DD-MM-YYYY'); 
  
            $("#format1").text(format1); 
  
            var format2 = moment($("#date_val") 
                .val()).format('DD MMMM YYYY'); 
  
            $("#format2").text(format2); 
  
            var format3 = moment($("#date_val") 
                .val()).format('DD/MM/YYYY'); 
  
            $("#format3").text(format3); 
        }); 
    </script> 
</body> 
  
</html>