How to Automatically Update Current Year with JavaScript

Automatically updating the current year in your footer is one of the easiest things to do. Unfortunately, many website owners don’t know that displaying the current year is important, both for copyright reasons, and for letting their users know that their website is up-to-date.

This is how the HTML looks in the footer on most older websites, and even on some modern sites:

<span>© 2018 Company Name</span>

• Copyright claim using the © symbol.
• Current year.
• Name of company.

By using this static timestamp approach, the website owner has to manually edit the displayed year, every year. This is impractical.

Far from all websites have a user-friendly UI Dashboard with easy access to edit their footer information. So the website owner either has to edit his or her HTML files themselves or hire someone to do it.

This is a waste of time and resources.

Unfortunately, by not displaying the current year it makes your website look outdated — even if it’s not. If you go to a website in today, but the website’s current year says 2015, what does that make you think?

Exactly. It makes you wonder if the website is still active.

After today, you’ll never have to worry about this problem on your own site or any of your clients’ websites.

Display current year with JavaScript’s getFullYear() method

Instead of using the static timestamp you saw in the HTML above, let’s make it dynamic by adding the native JavaScript date method, getFullYear(): to our footer.

First, add the following code to your browser console (or any text editor with a console) so we can test it:

document.write(new Date().getFullYear());

Hit enter, and you’ll see the current date in the top left corner of your browser window.

You can see the code in function inside this CodePen example. Look a the console window.

Now that we know it works, let’s take the getFullYear() code from above and wrap it inside our footer HTML from earlier:

<span>
  &copy;<script>document.write(new Date().getFullYear());</script> Company Name
</span>

The result:

Congratulations, you no longer have to worry about keeping your year timestamp up to date, JavaScript takes over from here.

Show original copyright year and current year

Sometimes you want to display both the current year and the year you registered your company. This could be to highlight the year of your copyright claims. Not a problem. If you want your start year to be 2016, just add 2016- to the code above, so it looks like this:

<span>
  &copy; 2016-<script>document.write(new Date().getFullYear());</script> Company
  Name
</span>