Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • 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=
    </script>
    <script src=
    </script>
    <link rel="stylesheet" href=
</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>


Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!