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 upd
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>
©
<span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>
Company Name
</div>
<script type="text/javascript">document.write(new Date().getFullYear());</script>
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!
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
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:
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()
.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.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).
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>