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




Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.



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.