Today it is .
In this guide we look at how to get today’s date and stick it on our web page. You may want to do this for any number of reasons, such as to display the current date as part of your header, or you may want to use it in a calculation to determine how many days are left on a special deal, for example.
As always, there are about 100 ways to achieve anything in code, and about 1000 add-ons you can use to do the job, but this is how I did it in clean vanilla code, with an explanation on how it works.
// Create a new Date object which contains the current date information let fullDate = new Date();
Now, this contains everything we need, but it doesn’t provide a nice user-friendly depiction. Let’s see what is printed just using this variable as it is. We use an id given to a span tag and amend the text content to display the information.
document.getElementById("full-date").textContent = fullDate;
It looks like this:
Today it is .
So, the Date object has given us a lot of useful information. We can tell the day, month, date, year, and even the time that the date was calculated and the time-zone we’re in. Useful, but not exactly the format we want to be showing our visitors.
Taking a look at W3 Schools Date Reference page, we can see all of the methods in a nice list with explanations. There’s four here that get us what we want; the getDay(), getDate(), getMonth() and getFullYear() methods.
With this information we should be able to create a nice string to display the date to our users.
We’ll use each method individually to see what information it provides, so we can understand what is happening, and then we will combine it all at the end to generate our final string and display it on the webpage.
The Date object has a method that returns the day of the week as a number 0-6. The first important thing to note is that 0 is Sunday, not Monday. With this information, we can then use a small array to display the day in the text that we want. If we were to simply print the getDay() return in its raw form, Monday would be displayed as ‘1’, which wouldn’t make a whole lot of sense to our visitors.
In this tutorial, we would like to display the full text of the day, so we’ll develop an array to do this:
// Array for the day text we want to display let dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
We can then replace the number with the correct day text that we want, storing it in a variable called dayString:
// Use the method as an index to return the string for today let dayString = dayArray[fullDate.getDay()];
What we are doing here is using the Date object’s method getDay() to provide us with the day of the week as a number 0-6, and then using that in the array as the index number to correspond to the correct day we would like to print. For example, if it is Monday and the number returned by the getDay() method is therefore 1, we will be returning index position 1 of the dayArray, which is the string “Monday”. The dayString variable will therefore contain the string “Monday”.
document.getElementById("day-date").textContent = dayString;
Today the day is .
Getting the date to display how we would like it is simpler than the day, as all we want to do is display a number. This is exactly what the getDate() method returns.
// Store the date in a variable let dateString = fullDate.getDate(); // Display the date to check it is working correctly document.getElementById("date-date").textContent = dateString;
Today the date is .
We’re back to having to create a small array to handle the text for the month, just as we did for handling the day. Thankfully, 0 is January, so this follows a more familiar format. We use the returned getMonth() integer as an index reference for our array to get the correct string to display.
// Array for the month text we want to display let monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; let monthString = monthArray[fullDate.getMonth()]; // Display the month string to check it is correct document.getElementById("month-date").textContent = monthString;
Today the month is .
The year is easily retrieved via the getFullYear() method, which we store in a variable called yearString.
// Get the year string let yearString = fullDate.getFullYear(); // Display the year string document.getElementById("year-date").textContent = yearString;
The current year is .
Now we have determined how to generate each individual component of the date we wish to display, all that is left is to create a string with all of the information present and add it to our webpage.
// Finally we can combine all of the strings into one that we wish to display var dateToday = dayString + " " + dateString + " " + monthString + " " + yearString; // Add the string to HTML tag using an id, to display the full date document.getElementById("final-date").textContent = dateToday;
The date today is .