Get Date and Time from PHP to HTML through AJAX

Table of Contents

Introduction

PHP is a Programming Language which is popularly used for Server Scripting. It is very well known and powerful language to develop Dynamic web pages. HTML is a Standard Markup language that is used to design Web Pages. HTML is the most important Language to design an Attractive web page.

In most cases, we need the current date and time to be shown on our websites. It can be done dynamically in web pages. To do so, we need to use PHP. PHP can generate the current date and and time for any time zone. This data can be easily shown in an HTML web page with the help of AJAX.

Working

Generally, we need current date and time for the Home page of our website. It is also required in online forms, payment methods, blogs etc. Current and Previous Date/Time is also important for various online works. We need this frequently in web development.

PHP Function to Generate Current Date

The function which is used to generate current date in PHP is date(). This function is also used to generate current time. We need only one parameter i.e. the format of date/time to generate the current date and time with this function.

Get the Value in HTML

In HTML, we can get the current date/time value in an Input Text box or in any kind of Dynamic/Static control with the help of JQUERY and AJAX. In order to use JQUERY in HTML, we need to connect our HTML file with JQUERY CDN. To do so, click here. Get the minified code for the latest version of JQUERY CDN. Copy the whole code and paste it within the <head> and </head> tag.

Method

First of all, we should create an HTML file with two input text boxes. One for the current Date and another for the current Time. These will be dynamic text boxes with names ‘cDate’ and ‘cTime’ that will show the date/time values that will be fetched from the PHP file. A button should be added under the two text boxes to apply an onclick event to get the values inside the text boxes. The code for HTML file is given below –

<!DOCTYPE html>
<html>
<head>
	<title>Get Date and Time</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
	<center>
		<h2>Get Current Date and Time</h2>
		<input type="text" name="cDate" placeholder="Get Current Date">
		<p>
		<input type="text" name="cTime" placeholder="Get Current Time">
		<p>
		<button id="btn">Get</button>
	</center>
</body>
</html>

The page will look like this –

Now, we need to create a PHP file with the name getDate.php. You can choose any other name for the file. In the PHP file, we should write the PHP code to generate the current Date. Before that, we should set the default time zone as per the location we need. To set the default time zone, we need to use date_default_timezone_set(). The PHP code is given below –

<?php 

date_default_timezone_set("Asia/Kolkata");

$date = date('d-m-Y');

echo $date;

 ?>

We need to create a similar PHP file with name getTime.php to generate the current time in twelve hour format. Same function will be used for the purpose with a different value. The code is given below –

<?php 

date_default_timezone_set("Asia/Kolkata");

$time = date('h:i:s A');

echo $time;

 ?>

Now, the time to create the JQUERY code in the HTML file to connect the PHP and the HTML file and to fetch the value from the PHP file. You can enter the JQUERY code before the </body> tag. There will be two sets of codes, one for Date and another for Time. The code is written below –

To get Date –

<script type="text/javascript">
		$(document).ready(function(){
			$('#btn').click(function(){
				$.ajax({
					type: 'GET',
					url: 'getDate.php',
					success: function(data){
						document.getElementsByName("cDate")[0].value = data;
					}
				});
			});
		});
	</script>

To get Time –

<script type="text/javascript">
		$(document).ready(function(){
			$('#btn').click(function(){
				$.ajax({
					type: 'GET',
					url: 'getTime.php',
					success: function(data){
						document.getElementsByName("cTime")[0].value = data;
					}
				});
			});
		});
	</script>

The overall HTML code along with JQUERY AJAX is given below –

<!DOCTYPE html>
<html>
<head>
	<title>Get Date and Time</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
	<center>
		<h2>Get Current Date and Time</h2>
		<input type="text" name="cDate" placeholder="Get Current Date">
		<p>
		<input type="text" name="cTime" placeholder="Get Current Time">
		<p>
		<button id="btn">Get</button>
	</center>

	<script type="text/javascript">
		$(document).ready(function(){
			$('#btn').click(function(){
				$.ajax({
					type: 'GET',
					url: 'getDate.php',
					success: function(data){
						document.getElementsByName("cDate")[0].value = data;
					}
				});
			});
		});
	</script>

	<script type="text/javascript">
		$(document).ready(function(){
			$('#btn').click(function(){
				$.ajax({
					type: 'GET',
					url: 'getTime.php',
					success: function(data){
						document.getElementsByName("cTime")[0].value = data;
					}
				});
			});
		});
	</script>
</body>
</html>

The output will look like this –

Conclusion

This is a very important function of PHP. Programmers use this function to do many of their works. By applying the values for time zones, exact date/time values can be got which is very useful for almost all kinds of websites.

Thank you.