ADVERTISEMENT
ADVERTISEMENT

Home » Javascript

jQuery - Get and Format Current Date using jQuery

In this example we will learn how to get current date and display in different formats using jQuery. We will print date in DD/MM/YYYY, MM/DD/YYYY or DD MON YYY format on button clicks.

jQuery Code Snippet - Format Current Date using jQuery

jQuery/JavaScript

<script type="text/javascript">
$(document).ready(function(){
	var date=new Date();
	$("#btn1").click(function(){
		var val=date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
		$("#printDate").text(val);
	});
	$("#btn2").click(function(){
		var val=(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear();
		$("#printDate").text(val);
	});
	$("#btn3").click(function(){
		var months=["JAN","FEB","MAR","APR","MAY","JUN","JUL",
		"AUG","SEP","OCT","NOV","DEC"];
		var val=date.getDate()+" "+months[date.getMonth()]+" "+date.getFullYear();
		$("#printDate").text(val);
	});				
});

HTML Source Code with jQuery/JavaScript

<!--jQuery - Get and Format Current Date using jQuery.-->
<html>
	<head>
		<title>jQuery - Get and Format Current Date using jQuery.</title>
		<!--Example CSS-->
		<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
		<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function(){
				var date=new Date();
				$("#btn1").click(function(){
					var val=date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
					$("#printDate").text(val);
				});
				$("#btn2").click(function(){
					var val=(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear();
					$("#printDate").text(val);
				});
				$("#btn3").click(function(){
					var months=["JAN","FEB","MAR","APR","MAY","JUN","JUL",
					"AUG","SEP","OCT","NOV","DEC"];
					var val=date.getDate()+" "+months[date.getMonth()]+" "+date.getFullYear();
					$("#printDate").text(val);
				});				
			});
		</script>
	</head>
	<body style="text-align: center;">
		<h1>jQuery - Get and Format Current Date using jQuery.</h1>
		<input type="button" id="btn1" value="Get Date (DD/MM/YYYY)"/>
		<input type="button" id="btn2" value="Get Date (MM/DD/YYYY)"/>
		<input type="button" id="btn3" value="Get Date (DD MON YYYY)"/>
		<p id="printDate"/>
	</body>
</html>

Result

format date using jquery
ADVERTISEMENT




ADVERTISEMENT



Comments and Discussions!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.