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