javascript - Shortest way to print current year in a website - Stack Overflow

admin管理员组

文章数量:1128295

I need to update a few hundred static HTML pages that have the copyright date hard coded in the footer. I want to replace it with some JavaScript that will automatically update each year.

Currently I’m using:

<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>

Is this as short as it gets?

I need to update a few hundred static HTML pages that have the copyright date hard coded in the footer. I want to replace it with some JavaScript that will automatically update each year.

Currently I’m using:

<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>

Is this as short as it gets?

• javascript
• html
• date

Share Improve this question Follow edited Sep 7, 2018 at 12:51 Sebastian Simon 19.5k88 gold badges6060 silver badges8484 bronze badges asked Dec 30, 2010 at 12:29 tpowtpow 7,8861111 gold badges6262 silver badges8585 bronze badges 1

• Just so you know, it's generally not recommended to use document.write, as it has several gotchas that can catch you by surprise. More information on the MDN article on document.write. – Flimm Commented Mar 11, 2022 at 6:31

Add a comment  | 

19 Answers 19

Sorted by: Reset to default 747

Years later, when doing something else I was reminded that Date() (without new) returns a string, and a way that's one character shorter that my original below came to me:

<script>document.write(/\d{4}/.exec(Date())[0])</script>

The first sequence of four digits in the string from Date() is specified to be the year. (That wasn't specified behavior — though it was common — when my original answer below was posted.)

Of course, this solution is only valid for another 7,979 years (as of this writing in 2021), since as of the year 10000 it'll show "1000" instead of "10000".

---

You've asked for a JavaScript solution, so here's the shortest I can get it:

<script>document.write(new Date().getFullYear())</script>

That will work in all browsers I've run across.

How I got there:

• You can just call getFullYear directly on the newly-created Date, no need for a variable. new Date().getFullYear() may look a bit odd, but it's reliable: the new Date() part is done first, then the .getFullYear().
• You can drop the type, because JavaScript is the default; this is even documented as part of the HTML5 specification, which is likely in this case to be writing up what browsers already do.
• You can drop the semicolon at the end for one extra saved character, because JavaScript has "automatic semicolon insertion," a feature I normally despise and rail against, but in this specific use case it should be safe enough.

It's important to note that this only works on browsers where JavaScript is enabled. Ideally, this would be better handled as an offline batch job (sed script on *nix, etc.) once a year, but if you want the JavaScript solution, I think that's as short as it gets. (Now I've gone and tempted fate.)

---

However, unless you're using a server that can only provide static files, you're probably better off doing this on the server with a templating engine and using caching headers to allow the resulting page to be cached until the date needs to change. That way, you don't require JavaScript on the client. Using a non-defer/async script tag in the content also briefly delays the parsing and presentation of the page (for exactly this reason: because the code in the script might use document.write to output HTML).

TJ's answer is excellent but I ran into one scenario where my HTML was already rendered and the document.write script would overwrite all of the page contents with just the date year.

For this scenario, you can append a text node to the existing element using the following code:

<div>
    &copy;
    <span id="copyright">
        <script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
    </span>
    Company Name
</div>

If you want to include a time frame in the future, with the current year (e.g. 2017) as the start year so that next year it’ll appear like this: “© 2017-2018, Company.”, then use the following code. It’ll automatically update each year:

&copy; Copyright 2017<script>new Date().getFullYear()>2017&&document.write("-"+new Date().getFullYear());</script>, Company.

© Copyright 2017-2018, Company.

But if the first year has already passed, the shortest code can be written like this:

&copy; Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.

The JS solution works great but I would advise on a server side solution. Some of the sites I checked had this issue of the entire page going blank and only the year being seen once in a while.

The reason for this was the document.write actually wrote over the entire document.

I asked my friend to implement a server side solution and it worked for him. The simple code in php

<?php echo date('Y'); ?>

Enjoy!

<script type="text/javascript">document.write(new Date().getFullYear());</script>

Here's the ultimate shortest most responsible version that even works both AD and BC.

[drum rolls...]

<script>document.write(Date().split` `[3])</script>

That's it. 6 Bytes shorter than the accepted answer.

If you need to be ES5 compatible, you can settle for:

<script>document.write(Date().split(' ')[3])</script>

It's not a good practice to use document.write. You can learn more about document.write by pressing here. Here's a somewhat friendly JavaScript solution. And yes, there are studies on how InnerHTML is bad, working on a more friendly solution.

document.getElementById("year").innerHTML = (new Date().getFullYear());

↑ JavaScript

↓ HTML

<p>Company &copy; <span id="year"></span> All Rights Reserved.</p>

Here's a JSFiddle to test it out. Instead of using JavaScript, personally, I'd recommend writing the current year with PHP, it's a lot more safe doing with PHP instead of JavaScript.

<?php echo date("Y"); ?>

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

Easy-peasy!

<p>&copy;
  <script type="text/javascript">
    document.write(new Date().getFullYear());
  </script>
</p>

For React.js, the following is what worked for me in the footer...

render() {
    const yearNow = new Date().getFullYear();
    return (
    <div className="copyright">&copy; Company 2015-{yearNow}</div>
);
}

according to chrome audit

For users on slow connections, external scripts dynamically injected via document.write() can delay page load by tens of seconds.

https://web.dev/no-document-write/?utm_source=lighthouse&utm_medium=devtools

so solution without errors is:

(new Date).getFullYear();

The Accepted Answer Does Not Always Work

A recent update has caused all of my WordPress footer copyright dates to get pushed down to then end of the page instead of writing it inline like it used to. I'm sure there are other cases where this may happen as well, but this is just where I've noticed it.

If this happens, you can fix it by creating an empty span tag and injecting your date into it like this:

<span id="cdate"></span><script>document.getElementById("cdate").innerHTML = (new Date().getFullYear());</script> 

or if you have jquery enabled on your site, you can go a bit more simple like this:

<span id="cdate"></span><script>$("#cdate").html(new Date().getFullYear());</script> 

This is similar to Adam Milecki's answer but much shorter

Full year:

document.getElementById("getyear").innerHTML = (new Date().getFullYear());

<span id="getyear"></span>

This is the best solution I can think of that will work with pure JavaScript. You will also be able to style the element as it can be targeted in CSS. Just add in place of the year and it will automatically be updated.

//Wait for everything to load first
window.addEventListener('load', () => {
    //Wrap code in IIFE 
    (function() {
        //If your page has an element with ID of auto-year-update the element will be populated with the current year.
        var date = new Date();
        if (document.querySelector("#auto-year-update") !== null) {
            document.querySelector("#auto-year-update").innerText = date.getFullYear();
        }
    })();
});

There are many solutions to this problem as provided by above experts. Below solution can be use which will not block the page rendering or not even re-trigger it.

In Pure Javascript:

window.addEventListener('load', (
    function () {
        document.getElementById('copyright-year').appendChild(
            document.createTextNode(
                new Date().getFullYear()
            )
        );
    }
));

<div> &copy; <span id="copyright-year"></span></div>

In jQuery:

$(document).ready(function() {
  document.getElementById('copyright-year').appendChild(
    document.createTextNode(
      new Date().getFullYear()
    )
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> &copy; <span id="copyright-year"></span></div>

This answer is similar to Ray's but uses a template literal and text fallback

<p>&copy;
  <span id="copyright-year">2021</span>
  Company Name
</p>

<script>
  document.getElementById("copyright-year").innerHTML = `${new Date().getFullYear()}`;
</script>

Results in © 2022 Company Name

document.getElementById("copyright-year").innerText = `${new Date().getFullYear()}`;

also works.

For React.js, We can use in a single line-

    return 
    <div className="copyright">Company 2015-{new Date().getFullYear()}</div>
    

This snippet kicks in once the HTML document finishes parsing. Its job is to tweak elements that have the .dyn_year class, especially in cases where a single line of text may encompass multiple copyright years.

Script:

<script>document.addEventListener("DOMContentLoaded",()=>{ document.querySelectorAll(".dyn_year").forEach(el=>el.innerText=new Date().getFullYear()); })</script>

HTML:

<span> © 2014-<span class="dyn_year"></span>  LoremIpsum, LLC. All rights reserved. Lipsum® and Gipsum® are trademarks of LoremIpsum, LLC. EmlorSumip is a tradename of LoremIpsum, LLC. © 2001-<span class="dyn_year"></span> GoremGipsum LLC. LipGipSum®  is a trademark of GoremGipsum LLC.</span>

DOMContentLoaded:

https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event https://caniuse.com/?search=DOMContentLoaded

querySelectorAll:

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://caniuse.com/?search=queryselectorall

Shortest way to print current year in a website

Just use this code

<?php echo date('Y'); ?>

本文标签： javascriptShortest way to print current year in a websiteStack Overflow