In this article we will show you the solution of format date in jQuery, here we are going to show you example for format date with the help of split(), Date() methods.
The split() method used to separate given date string and Date() method used for create new format date with specified date.
You can modify it with another format by separated date and also you can specify any other date you want.
Step By Step Guide On Format Date In jQuery :-
Here we defined html block with heading tag, empty paragraph element with class attribute to show result format when clicks on ‘Click Here’ 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.
First you need to specify any date string then split them by split() method and using Date() constructor converting separated date into date format then printing new format date on webpage.
<!DOCTYPE html>
<html>
<head>
<title>Date Format</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var dt='14.07.2021';
var frm=dt.split(".");
var res=new Date(frm[2], frm[1], frm[0]);
var DTres=res.getFullYear()+"-"+res.getMonth()+"-"+res.getDate();
console.log(DTres);
$(".dat").html(DTres);
})
});
</script>
</head>
<body>
<h2>Date Format</h2>
<p class="dat"></p>
<button>Click Here</button>
</body>
</html>
- <!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.
- The<html> tag is used to indicate the beginning of HTML document.
- 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.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- 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.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() function then click() method defined with button tag by name where we specified date string ’14.07.2021’ and stored on variable ‘dt’.
- Appending split method with variable ‘dt’ to split specified string date to separately and it is pointed by frm array variable.
- In array ‘frm’ our separated date values stored now we need to pass them to new Date() constructor to make as date format stored on variable ‘res’. And then using ‘getFullYear(),getMonth(),getDate()’ methods we formed new date format, stored on variable ‘DTres’.
- We printed on both console as well webpage using html() method appending with paragraph element.
- In html block we defined h2 tag with text ‘Date Format’, paragraph element defined with class attribute ‘dat’ and button Click Here.
- 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 to format date 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 ‘Date Format’, paragraph element with class attribute ‘dat’ to display result and button ‘Click Here’ now user needs to click on it then we can see changed format date on console, webpage.
I hope this article on format date in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
