Javascript Tutorial -- Date and Time Functions in Javascript



One task that I frequently encounter when writing programs in any language is to add a date and/or time stamp somewhere in the output of the program. Fortunately, Javascript makes this task relatively easy with the "Date" class. The Date class works rather like the Array class -- you create a new object of the Date class, then use various built in methods to extract the information you want. For example, to return the current month, you use the getMonth() method; to return the four-digit year, you use the getFullYear() method; to return the current hour, you use the getHours() method, and so on. Here is a snippet of code that will return the full time and date in Javascript:
        <script type="text/javascript">
          <!--
            var Localtime = new Date()
            var Year = Localtime.getYear()
            //Month is getMonth() + 1 because computer scientists
            //start counting at 0.  January is traditionally 1, so
            //add 1 to correct this discrepancy.
            var Month = Localtime.getMonth() + 1
            var Day = Localtime.getDate()
            var Hours = Localtime.getHours()
            var Minutes = Localtime.getMinutes()
            var Date = Month + '/' + Day + '/' + Year
            var Time = Hours + ':' + Minutes

            document.write("The current date is " + Date + "<br>")
            document.write("The current time is " + Time + "<br>")
          //-->
        </script>
      
The example above is pretty rudimentary. If you are as...ahem...detail oriented...as I am, you will be annoyed to notice that if the months or days are less than 10, then they will be displayed with a single character. I prefer to see months and days with leading zeroes. Also, the hours will be displayed in 24-hour time, which some people have trouble reading. Sometimes you want the date displayed with a written month rather than a numerical month ("August" rather than "08"). Finally, although the script above doesn't show it, it is also possible to retrieve the day-of-week with "getDay()". Fortunately, Javascript will allow you to make these corrections. Here is a tweaked version of the example script above:
        <script type="text/javascript">
          <!--
            var Localtime = new Date()
            var Year = Localtime.getYear()
            var Month = Localtime.getMonth()
            var Day = Localtime.getDate()
            var WDay = LocalTime.getDay()
            var Hours = Localtime.getHours()
            var Minutes = Localtime.getMinutes()
            var WDay = LocalTime.getDay()
            var ampm = "am"
            var Months = new Array()
            var var WeekDay = new Array()

    	    Months[0] = "January"
	    Months[1] = "February"
	    Months[2] = "March"
	    Months[3] = "April"
	    Months[4] = "May"
	    Months[5] = "June"
	    Months[6] = "July"
	    Months[7] = "August"
	    Months[8] = "September"
	    Months[9] = "October"
	    Months[10] = "November"
	    Months[11] = "December"

	    WeekDay[0] = "Sunday"
	    WeekDay[1] = "Monday"
	    WeekDay[2] = "Tuesday"
	    WeekDay[3] = "Wednesday"
	    WeekDay[4] = "Thursday"
	    WeekDay[5] = "Friday"
	    WeekDay[6] = "Saturday"
   
            if (Hours > 12)
	      {
	        ampm = "pm"
	      }

	    if (Minutes < 10)
	      {
	        Minutes = "0" + Minutes
	      }

            document.write("Date: " + WeekDay[WDay] + ", "
                           Months[Month] + " " + Day + ", "
                           + Year + "<br>")
            document.write("Time: " + Hour + ":" + Minute + " " +
                           ampm + "<br>")
          //-->
        </script>
      
Here is how the above script looks on-line.