WebCodeFun

JavaScript Tutorial

What's the date?

In this tutorial we learn how to print today's date on a webpage. We want it to display in a nice format for the user. For example, the below date - in orange for emphasis - has been generated using JavaScript.

Today it is .

YouTube Video

Written Guide

Contents

Introduction

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.

Me, I wanted to put the date on the home page to show visitors how long the site had been up for. We’ll use this idea as the basis for this tutorial. We’ll use JavaScript to get the date and then show the date on our web page, in a nice, user-friendly format.

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.

The Date object

Firstly, we need to get the date information using the Date object within JavaScript. We can store this in a temporary variable to grab the information we want from it. I called this variable fullDate.

// 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.

We could start stripping this information from this return, but that would be a lot of work and thankfully JavaScript is kind to us, and the Date object has some nice methods we can use.

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.

Getting the day

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”.

We can verify this by displaying the text from the dayString, which will correspond to the current day when you are doing this. Again, we use JavaScript to update the text content.

document.getElementById("day-date").textContent = dayString;

Today the day is .

Getting the date

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;

Again, we verify it is working using JavaScript to update the text content of a span tag, highlighted in blue:

Today the date is .

Getting the month

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;

We verify it is working using JavaScript to update the text content of a span tag:

Today the month is .

Getting the year

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;

We verify it is working using JavaScript to update the text content of a span tag:

The current year is .

Display the full date

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;

We can then display the date using JavaScript to update the text content of a span tag:

The date today is .

Useful resources

Need help?

Hopefully that all makes sense and you now feel confident using the Date object. If anything is unclear, please do get in touch by contacting me. Thanks for reading.

Back to top