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

Last Updated : 24 Sep, 2024

Using Moment.js to change date format in jQuery involves importing the Moment.js library and utilizing its functions to parse, manipulate, and format dates. You can easily convert dates into various formats by calling moment(date).format(desiredFormat) to display the date in your preferred format.

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/[email protected]/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: In this example we use Moment.js and jQuery to convert and display a selected date in three different formats. When the button is clicked, the date is reformatted into various patterns and displayed dynamically.

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/[email protected]/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>

Output:

How to Change Date Format in jQuery UI DatePicker ?

pulamolusaimohan

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?