Skip to content

All topics  /  jQuery

How To Change Date Format In JQuery Using Moment Js ?

jQuery ·

When “How To Change Date Format In JQuery Using Moment Js ?” moves through design, development and browser testing, the official article can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi guys,

In this blog, I will learn you how to change date format in jquery using moment js. We will talk about jquery change date format using moment js. If you need to change date format mm/dd/yyyy, mm-dd-yyyy, DD-MM-YYYY, yyyy-mm-dd etc in jquery then you can do it using moment jquery library.

moment.js is a jquery plugin that provide to change date formate from string date. they also provide to compare date, difference between two dates etc. there are several things work with dates, it's like carbon. So i think if you are using jquery then must be use moment js plugin for change date format.

Here i will give you very simple example that way you can understand how it works, actually it's very easy to use and fantastic So let's see the bellow example.

Moment js through we can simply convert string date to specific date format. So you can use following syntax for change date format.


Syntax 

$(document).ready(function() {
    moment(your_string_date).format(here_date_format);
});

Now we will see following simple example, in this example i give you four dates and then convert it into "DD-MM-YYYY" this format, So you can see bellow list how i give you.

1. 1997-08-15 : 15-08-1997

2. August 15, 1997 : 15-08-1997

3. 1997/08/15 : 15/08/1997

4. 1997.08.15 : 15/08/1997

I give basic string of date, you can pass your data string and check it so let's see bellow full example, how it works.

Example : 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to change date format in jquery using moment JS?  NiceSnippets.com</title>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
</head>
<body>
    <div class="container">
        <h1>Examples</h1>
        <ul>
            <li>1997-08-15 : <span class="format_one"></span></li>
            <li>August 15, 1997 : <span class="format_two"></span></li>
            <li>1997/08/15 : <span class="format_three"></span></li>
            <li>1997.08.15 : <span class="format_four"></span></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            var format_one = moment("1997-08-15").format('DD-MM-YYYY');
            $(".format_one").text(format_one);
            var format_two = moment("August 15, 1997").format('DD-MM-YYYY');
            $(".format_two").text(format_two);
            var format_three = moment("1997/08/15").format('DD/MM/YYYY');
            $(".format_three").text(format_three);
            var format_four = moment("1997/08/15").format('DD/MM/YYYY');
            $(".format_four").text(format_four);
        });
    </script>
</body>
</html>

It will help you....

More on this topic