Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 16 May, 2022
Improve Article
Save Article

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.



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.



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=””></script>   
<script src=””></script>  
<link rel=”stylesheet” href=””>


  • 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’.
  • 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



<!DOCTYPE html>
    <script type="text/javascript" src=
    <script src=
    <link rel="stylesheet" href=
    <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">
    <div class=" w-25">
        <ul class="list-group">
            <li class="list-group-item "> DD-MM-YYYY :
                <span id="format1" 
            <li class="list-group-item ">DD MMMM YYYY :
                <span id="format2" 
            <li class="list-group-item ">DD/MM/YYYY :
                <span id="format3" 
    <script type="text/javascript">
        $("#datebtn").click(function () {
            var format1 = moment($("#date_val")
            var format2 = moment($("#date_val")
                .val()).format('DD MMMM YYYY');
            var format3 = moment($("#date_val")



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!