All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Change Date Format In jQuery

Last Updated : Mar 11, 2024

Change Date Format In jQuery

In this article we will show you the solution of change date format in jQuery, here we are going to show you example for change format date with the help of external open source moment script file. The moment(), format() defined in moment script file you can use it change any date to any other format.

To implement above mentioned method we need moment script file support that’s way imported in head section.

Step By Step Guide On Change Date Format In jQuery :-

Here we defined html block with heading tag, paragraph element with text nearly defined span element with class attribute to show result when clicks on ‘Change Date’ button.

In script block we defined ready() method which is automatically starts loading code of within that click() function defined to load main process after button click.

You need to specify any date string on moment() method then which is need to append with format() method contain expected date format.

<!DOCTYPE html>
<html>
    <head>
        <title>Change Date Format</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    var fd=moment("May 16, 2022").format("DD/MM/YYYY");
                    $(".first_date").text(fd);
                })
            });
        </script>
    </head>
    <body>
        <h2>Changing Date Format</h2>
        <p>May 16, 2022: <span class="first_date"></span></p>
        <button>Change Date</button>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Here we imported open source jquery library support file which is needed for coding using jquery in program.
  5. Then imported moment manifest file for allow moment(), format() method actions properly.
  6. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  7. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  8. In script we defined ready() function then click() method defined with button tag by name where we defined moment() with date string ’ May 16, 2022’ which is appends with format method with format pattern ‘DD/MM/YYYY’ and stored on variable ‘fd’.
  9. We printed result of new date on webpage by text() method in html block appended on span tag.
  10. In html block we defined h2 tag with text ‘Changing Date Format’, paragraph element with text ‘May 16, 2022:’, empty span tag with class ‘first_date’ and finally button ‘Change Date’.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how change date format in jquery.

Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.

When we executes this program on browser we can see heading ‘Changing Date Format’, paragraph element text ‘May 16, 2022:’ and button ‘Change Date’ now user needs to click on it then we can see new format date near para text on webpage.

I hope this article on change date format in jQuery helps you and the steps and method mentioned above are easy to follow and implement.