How to Display the Current Date and Time Using jQuery
- Get the Current Date and Time Using jQuery
-
DateObject in JavaScript - Get the Current Date Using jQuery
- Get the Current Time Using jQuery
This tutorial will discuss displaying the date and time on our websites. We will examine the JavaScript Date object in depth.
Our primary focus will be on retrieving the date and time in various forms using jQuery.
Get the Current Date and Time Using jQuery
The date and time display on web pages is a very user-friendly feature. Some websites update their readers on various issues, such as the country’s political state, or an online newspaper website with a date, as newspapers hold changing information daily.
Searching and reading any specific blog or news is easy with the date and time mentioned. So, today we’ll talk about how we can add a date and time feature to our website.
Date Object in JavaScript
JavaScript provides the Date object to work with dates and times in our applications or webpages. The Date object has numerous methods for setting, fetching, and modifying dates.
The Date Object is created as:
var date = new Date();
If we look at the output for the date variable, we’ll see:
As shown in the image above, it displays the current date, time, and day of the week. We can also call it a function without using the new keyword, such as Date(), which will return a string representation of the current date and time.
We’ll talk about how to get the date and time individually in different formats using jQuery because the above way gets the date and time together. Let’s look into other options for obtaining them separately.
Get the Current Date Using jQuery
As we saw before, the new Date() returns the day, date, and time, but what if we want to show a day or a date separately? How are we going to do that?
The Date object has independent methods for getting the day, date, month, and year. Let’s take a closer look at them.
getDay(): The weekday for the given date, according to local time, is returned by this method, with Sunday denoted by the value 0.getDate(): The month day for the specified or current date according to local time is returned by this function.getMonth(): Returns the month of the given date according to local time as a numeric value where 0 indicates the year’s first month.getFullYear(): This method returns the year of the specified date in local time.
The methods getDay() and getMonth() provide a numeric value, but we may want to display the day and the month with their names on our website, so let’s go deeper and see how we can do that.
Get the Name of the Day
To get the day of the week, we have the getDay() method, but it returns a numerical value from 0 to 6, where 0 represents Sunday, 1 means Monday, and so on. We don’t want our web pages to say today is 0.
We need the name of the day. Look at the code below to see how we may accomplish this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var day_names= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var date = new Date();
$("#currentDay").text("Today is: " + day_names[date.getDay()]);
});
</script>
</head>
<body>
<p id="currentDay"></p>
</body>
</html>
Output:
The code above is simple to understand. We made an array of weekday names and assigned Sunday to index 0, Monday to index 1, and so on.
When the function getDay() returns a number, we’ll use that number as an index in the array to retrieve the value at that index.
Get the Name of the Month
The function getMonth() gives a number value between 0 and 11, where 0 represents January, 1 represents February, and so on. The Date object does not include a function for obtaining the month’s name, and we may need to display the date with the month’s name.
We’ll utilize the same method we used to determine the names of the days of the week. Examine the code below.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var date = new Date();
$("#currentMonth").text("Present Month is: " + month_names[date.getMonth()]);
});
</script>
</head>
<body>
<p id="currentMonth"></p>
</body>
</html>
Output:
Display the Date in the (Date Month, Year) Format
We have already discussed how to retrieve the day of the week or month by name. Let’s look at how we may display the date in the date, month, and year format.
You can experiment with different forms of your choice once you learn how to present in one format.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var date = new Date();
$("#dateFormat").text(date.getDate() + " " + month_names[date.getMonth()] + ", " + date.getFullYear());
});
</script>
</head>
<body>
<p id="dateFormat"></p>
</body>
</html>
Output:
Get the Current Time Using jQuery
JavaScript Date object provides a static method to get the current time. Static methods do not bind to a class’s objects and can be called independently only with a class name.
The static method Date.now() returns the numeric value corresponding to the current time.
Date.now()
Output:
The time is returned in milliseconds. This is not a very readable way of displaying time on our web pages.
We wish to display time in the hours: minutes: seconds format. Let’s discuss how we can get the time in our desired form.
There can be many formats in which you may want to display the time on your website. We will discuss the two primary forms, i.e., 24-hour and 12-hour, and after that, you’ll get a good understanding of it and can retrieve time in any format of your choice.
In 24-Hour Format (Hours: Minutes: Seconds)
The Date object provides us with different ways to get the time of the specified date. Let’s explore each method in detail.
getHours(): This method returns the hour per local time.getMinutes(): This method returns the minutes per local time.getSeconds(): This method returns the seconds per local time.
Using these three methods, we can easily display the time in our required format. Check the code below to have a clear understanding.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var date = new Date();
$("#24HFormat").text(date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
});
</script>
</head>
<body>
<p id="24HFormat"></p>
</body>
</html>
Output:
By default, these Date object methods return the time in 24-hour format. This is how we can easily display the time in our required format on our websites.
In 12-Hour Format (hh: mm: ss)
The functions for getting the hours, minutes, and seconds were already covered in the previous method, and we learned that these functions return the 24-hour format. We now need to convert the 24-hour format to the 12-hour format.
Examine the code below to understand it properly.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var date = new Date();
var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
var am_pm = date.getHours() >= 12 ? "PM" : "AM";
hours = hours < 10 ? "0" + hours : hours;
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
$("#12HFormat").text(time);
});
</script>
</head>
<body>
<p id="12HFormat"></p>
</body>
</html>
Output:
You might assume this is a lot of coding, but it is straightforward. Let’s go over what we’re doing in the code in detail.
First, to convert the time to 12-hour format, we check if the value returned by the getHours() method is greater than 12 and if so, we deduct 12 from it. Second, we decide between AM and PM by checking if the hours are higher than or equal to 12, then display PM. Otherwise, AM.
In the following three lines of code, we are just checking if the value is less than 10, append 0 to it so it can be displayed as 01 or 02, etc.