JavaScript: Basic Date Display Script - webreference.com >IT 
    internet.com/IT internet.com/CIO internet.com/Security 
    internet.com/Networking internet.com/Storage bITa Planet CIO Update Database 
    Journal Datamation Enterprise IT Planet Enterprise Networking Planet 
    Enterprise Storage Forum eSecurity Planet Hardware Central Intranet Journal 
    ISP Planet ITSMwatch Linux Planet Open Networks Today ServerWatch VoIP 
    Planet WebVideoUniverse Wi-Fi Planet WinDrivers.com Network Map >Developer 
    internet.com/Developer 15 Seconds 4GuysFromRolla.com ASP101 CodeGuru 
    Developer.com DevX FlashKit.com Gamelan JARS JavaScript.com JavaScriptSource 
    PHPBuilder.com ScriptSearch VB Forums VB Wire WebDeveloper.com Webreference 
    Network Map >News 
    Internetnews.com Linux Today Network Map >Small Business 
    Ecommerce Guide Refer-It SmallBusinessComputing Webopedia WinPlanet Network 
    Map >Personal Tech 
    BlackBerryToday Jumbo Megapixel.net Palm Boulevard PDAStreet PocketPCWire 
    Smart Phone Today WindowsMobileToday Network Map >Events 
    JupiterEvents JupiterWebcasts Jobs Partners >Solutions 
    eBooks Video Shop >Login 
    Manage My Profile >Register 
    Why Join?        


            WebRef  Sitemap · Experts · Tools · Services · Newsletters · About


      home / js / scripts / basic_date


                           

                  PDAs
                  PC Notebooks
                  Printers
                  Monitors 


                  Developer News
                  Mozilla Aims to Weave a New Web
                  Are You Violating BusyBoxÂ’s GPL Code?
                  Red Hat CEO Takes Flight




JavaScript: Basic Date Display Script
By Lee Underwood
Have you been wanting to display the current date on your Web pages? There are 
several ways to accomplish it. One method uses JavaScript, and the good news is 
that you don't have to write the script from scratch. There are many sites that 
offer existing JavaScripts, such as JavaScript Source and Script Search. These 
scripts are usually provided free of charge.
The very thought of using JavaScript scares many people, although it shouldn't. 
When using an existing script, it usually doesn't take any programming knowledge 
to implement it. In our case, we have a ready-to-use basic date script, "right 
out of the box," thanks to our friends at cgiscript.net. This one even has 
comments so you can better understand how the script works.
The Basic Script
First, let's look at the script itself. For the sake of brevity, I've removed 
all the comments and extra lines. The fully documented file can be found at 
cgiscript.net.
<script language="JavaScript">
  <!--
    var now = new Date();
    var days = new Array(
      'Sunday','Monday','Tuesday',
      'Wednesday','Thursday','Friday','Saturday');
    var months = new Array(
      'January','February','March','April','May',
      'June','July','August','September','October',
      'November','December');
    var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
    function fourdigits(number)	{
      return (number < 1000) ? number + 1900 : number;}
    today =  days[now.getDay()] + ", " +
       months[now.getMonth()] + " " +
       date + ", " +
       (fourdigits(now.getYear()));
     document.write(today);
  //-->
</script>
The first and last two lines aren't part of the actual code. They tell the 
browser the type of language used in the script and use the HTML comment code to 
keep it from being viewed as text by older browsers. The script itself is quite 
simple. The first part declares four variables: now, days, months, and date. The 
function fourdigits is then declared, which sets up the display of the year. 
Next, the four lines shown in red specify the display format and the last line, 
shown in blue, tells the script to print the information on the Web page. 
Formatting the Date
As it's written in the script, the date is displayed on the Web page in the 
following format: Wednesday, January 05, 2005. This is accomplished as follows, 
using the code shown above in red:
  In the first line, the variable is named (today) and, using the getDay() 
  method along with the days and now variables declared earlier in the script, 
  the day of the week is obtained. Then a comma and a space are added ( + ", " 
  +). This line will be displayed as Wednesday. 
  The next line uses the getMonth() method, along with the months and now 
  variables declared earlier, to obtain the month, i.e. January. It then adds a 
  space (+ " " +). 
  Next, the actual date is obtained using the date variable, then a comma and a 
  space are added (+ ", " +) 
  Finally, the year is returned using the fourdigits function along with the now 
  variable and the getYear() method. 
The display format can be changed by making a few modifications in the lines 
shown in red. For instance, in order to change the display to January 05, 2005 
(Wednesday), the code would be modified as shown in the box below. Notice that 
the only modification is in the last line. We moved it from the beginning to the 
end of our statement and added the parentheses. 
  today =  months[now.getMonth()] + " " +
    date + ", " +
    (fourdigits(now.getYear())) + " " +
    "("+days[now.getDay()]+")";
If you want to display just the date, without the day of the week, you can 
modify the code as shown below:
  today =  months[now.getMonth()] + " " +
    date + ", " +
    (fourdigits(now.getYear()));
Placement of the Script
There are two general methods used to place the script on the Web page. The one 
given by the folks at cgiscript.net places the script in the body of the 
document where it is to be displayed. Another, less confusing method would be to 
place the script in an external file and call it from within the page where you 
want it displayed. This method would save space and makes it easier to call the 
script from other pages, as well.
First, copy the script itself, without the opening and closing script and 
comments tags, and put it into a blank file. Then give the file a name, such as 
"date.js." It should look like the one in the box below (the last few lines may 
look different if you have made changes to the display format).
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
      var now = new Date();
      var days = new Array(
        'Sunday','Monday','Tuesday',
        'Wednesday','Thursday','Friday','Saturday');
      var months = new Array(
        'January','February','March','April','May',
        'June','July','August','September','October',
        'November','December');
      var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
        function fourdigits(number)	{
          return (number < 1000) ? number + 1900 : number;}
      today =  days[now.getDay()] + ", " +
        months[now.getMonth()] + " " +
        date + ", " +
          (fourdigits(now.getYear()));
      document.write(today);
To call the script, place a link to the file you just created on the Web page 
where you want the date displayed. The link should look like this: <script 
language="JavaScript" src="date.js"></script> Be sure there are no spaces or 
code between the opening and closing <script> tags as this may cause the loading 
of the script to fail.
Conclusion
That's all there is to it. We'll look at some other simple scripts in the future 
and see how to use them. In the meantime, if you have problems with other 
scripts, be sure to check out our JavaScript section and our forum.
      home / js / scripts / basic_date


  



             


      Search:        
      Jupitermedia Corporation has two divisions: Jupiterimages and 
      JupiterOnlineMedia
      Jupitermedia Corporate Info 
      Copyright 2007 Jupitermedia Corporation All Rights Reserved. 
      Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy. 
      Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

             The latest from WebReference.com Browse > Site Contents- - 
                    - - -Experts* 3D Animation* Design* DHTML* Graphics* HTML* 
                    JavaScript* Perl* XML- - - - -Web Resources* Authoring* 
                    Design* Internet* Multimedia* Programming* Promotion- - - - 
                    -Services* Interviews* Newsletters* Reviews* Search* Tools

            How to Get Great Search Engine Rankings · Inside Camtasia Studio 5: 
            Part 4 · Getting Started with Silverlight: Part 3 
            Sitemap · Experts · Tools · Services · Email a Colleague · Contact 
            FREE Newsletters > 

             The latest from internet.com 
            Cable VoIP Seeks Foothold in Business Market · Industry Insiders: 
            Ron Sege · AMD Phenom 9900 Performance Preview 


Created: January 10, 2005
URL: http://webreference.com/js/scripts/basic_date/