Several ways to display today’s date on a web page with Javascript, so that it appears in different formats.
In this article we are going to show several ways to show the current date on a web page and make it dynamic, so that today’s date is always shown, without us having to do anything, neither update the page nor any another maintenance task.
The easiest way to do this, which does not have any requirements for its operation, neither in relation to the server where the page is located, nor to the browser with which the user accesses it, is with Javascript. Well, it actually requires the user visiting our page to have a Javascript-enabled browser, but that’s the norm these days.
The functions with which the current date is calculated by means of programming in the client are offered to us by the Javascript Date class, which is part of any Javascript, no matter how old the browser is. In the DesarrollolloWeb.com article, it was already explained how to make our own codes to obtain dates in any format and with any data, which can be good to learn the basics. In this article I’m going to leave the explanations aside and focus more on showing several scripts, separately, that can help us create a date with different formats.
We can that we will build on this article.
basic date with numbers
We can use the following script to show the date in Spanish with numbers, that is, in the format as it is written in our language: day/month/year.
We have to place this Javascript script in the body of the page, in the place where we want today’s date to appear. We can place this script in any container where we want it to appear, such as a paragraph, a layer or division, a table cell, or wherever we want.
Date with the name of the month
We might want to put the date written where the lettered month name appears, ie something like “November 9, 2009”. This would be good if we want to give a more prosaic touch to the display of the current date. It is achieved with a script like this:
As you may have seen, it is not difficult at all, but we have to create an array with the names of the months in Spanish, since in Javascript we have no way to get those names in our language. Again, we’ll place the script where we want the date to appear.
Date with name of month and name of day of the week
Now we are going to give a twist to the previous script to generate the name of the day of the week. The scheme remains the same, but now we will need another array with the names of the days of the week. With this script we will get a written date that will be similar to this: “Monday, November 9, 2009”.
Date with CSS styles
With the help of , we are going to show the date with a bit of graphic decoration. To do this we will write the date in various boxes, to which we will apply the appropriate styles to match the appearance of our site. In this case we are going to require two things:
-
The script to write the date, which we will place where we want it to appear.
-
CSS code with the style declarations, which we can place before showing the date or together with other style declarations that we have on our page or in the CSS style file.
As I said, the style declarations have been created by me now as it seemed good to me, but you would have to edit the CSS code so that the date has an aspect that looks good on your page.
With a minimum of Javascript and CSS skills, I’m sure you can alter this code so that the date can be displayed with a different aspect and a different ordering of the elements.
Creative date, with boxes for the days of the month and with the current day highlighted
By varying this script a bit to write today on a website, I have created a slightly more creative way of displaying the date. I use a slightly more complex Javascript code, to generate the boxes for every day of the month, highlighting the current day. It looks similar to a calendar, but much more simplified.
This script gets a bit complicated already, basically because I have to put in a few lines of code to find out how many days are in the current month, in order to create each of the checkboxes for each of the days. Also, I’ll have to do a check to find out what the current day is and style it differently. As in the previous case, we make use of a bit of CSS to decorate and style the components of this date.
To finish, I leave again the link to one created in this article.
Facebook Comments
Disqus