Add Date Script

Code to add and locate the date on webpages

Simple Javascript script to add the date to your website or web template pages and then locate it anywhere on the page using css.

See Also…

Date script support

Options for adding the code
You can add the date script to your global .js and .css files, or you can add it directly to each HTML page. See different options for steps #1 and #2 below. Only use one of the A or B options for each step.

Step #1 Option A: Add to .js file
Add the date to all webpages globally. Use in .js files only. Select and copy the following code, then paste this into the bottom of your "header.js" or any other .js file (do not add to .js files used in the html page <head> section like the javascripts.js):

Step #1 Option B: Add to HTML page
Code for an HTML webpage. Select and copy the following code, then paste this into your html webpage just after the <body> code at the top or just before the </body> at the bottom of your html page (do not add this code to the head section, view the source code of this page to see how it is added):

Step #2 Option A: Add to .css file option
Highlight, copy, and then paste the following code into your global css file (style.css, coolstyle.css, blue.css or other name). Adding this code at the bottom is fine:

Step #2 Option B: Add css to HTML page
Highlight, copy, and then paste the following code into your html webpage in the head section just before the </head>. (view the source code of this page to see how it is added):

Options:
Change the date location on your webpages by editing the css code you added in step #2. Also edit the font colors, size, border and background colors in the css code.

Mobile display options:
If your template or website includes a "media-queries.css" file you can optionally hide the date on mobile device views by adding the following style indicator to your "media-queries.css" in the (max-width: 482px) section:

#date-location { display: none; }

Or with the following code you can have the date in a different location on mobile:

#date-location { left: 5px; top: 125px; }

View the source of the media-queries.css used on this page to see these examples.

Troubleshooting:
If you added the above code and do not see the date:

Perhaps the date is located under some flash animation or a video. You can not layer divs over some webpage elements. Try changing the #date-location css code by editing the left and top px positions or try editing the css code z-index to a greater number.
Try changing the color of the font or background. Try editing the css HEX colors code you added in step #2. Edit the #006699 to another hex number like #000000 (black) or #FF0000 (red).
You may have missed a line of the code in step #1 or step #2. Try copying the code again and be sure you get every line. Use only one of the options for each step, use either the A or B option.