The date, while semi-functional as a data type (as seen in the depreciated lesson section), now seems to only work correctly as a normal function. That is, it only returns the correct date when the date function is called. However, unlike below, it spits ALL of the information out in one string, which you then must parse yourself. So, we'll start with the basics:
var my_date = Date();
You can print out the variable my_date to see the entire string, which is something akin to this: Mon Dec 11 2006 19:06:53 GMT-0500 (Eastern Standard Time). If that looks unusable, that's because you don't know about the split function. This function is very simple: it splits a string into separate pieces based on a delimiter (which is provided as an argument to the function) and spits all of those pieces into an array. So, I'll just lead by example. Here's how to tear this bugger apart:
var my_date_components = my_date.split(" ");
After this code executes, the variable my_date_components will be an array, with the first element being the 3-letter date, the second one being the 3-letter month, the third one being the day of the month, the fourth one being the 4-digit year, the fifth element being the full military time (hour:minute:second), and so on. The first 4 elements are pretty much usable right out of the box. However, the time will require a little finessing:
var my_time_components = my_date_components[4].split(":");
Remember, arrays use indexing, so you start counting from 0. So let's go ahead and jump a few steps and create a clock like I did below. I'm going to use functions to pretty-up all of the elements I plan on using, and then spitting it all out into a form element. Here goes!
function fix_month(month) {
if(month == "Jan")
return "January";
if(month == "Feb")
return "February";
if(month == "March")
return "March";
if(month == "Apr")
return "April";
if(month == "Jun")
return "June";
if(month == "Jul")
return "July";
if(month == "Aug")
return "August";
if(month == "Sep")
return "September";
if(month == "Nov")
return "November";
if(month == "Dec")
return "December";
return month;
}
function fix_day(day) {
if(day == "Mon")
return "Monday";
if(day == "Tue")
return "Tuesday";
if(day == "Wed")
return "Wednesday";
if(day == "Thu")
return "Thursday";
if(day == "Fri")
return "Friday";
if(day == "Sat")
return "Saturday";
if(day == "Sun")
return "Sunday";
return day;
}
function fix_hour(hour) {
if(hour >= 12)
return "PM";
else
return "AM";
}
var go = 1;
function make_it_happen() {
var meridian;
var my_date = Date();
var my_date_components = my_date.split(" ");
var my_time_components = my_date_components[4].split(":");
var c_day = fix_day(my_date_components[0]);
var c_month = fix_month(my_date_components[1]);
var meridian = fix_hour(my_time_components[0]);
if(my_time_components[0] > 12)
my_time_components[0] -= 12;
if(go) {
window.document.new_time_form.time_text.value = c_month + " " +
my_date_components[2] + ", " + my_date_components[3] + "; " +
my_time_components[0] + ":" + my_time_components[1] + ":" +
my_time_components[2] + " " + meridian;
setTimeout("make_it_happen();",500);
}
}
make_it_happen();
Stop or Start the clock.
The process is pretty simple. First, I defined all of the fix_whatever functions, and then I created the make_it_happen function, which is the workhorse. It first defines the date variable, initializes some other variables, and parses the date variable. Then it sends the necessary values through their respective corrective functions; the fix hour one is a bit different in that it returns the meridian (AM or PM) instead of the hour, which is done directly below that. Lastly, I set the form equal to that giant string. Easy as pie! Oh -- and there's that go variable. Set it equal to zero to stop the clock (doable in an onClick event in a link as I did or anywhere else) and set it equal to one and call the make_it_happen function to start it up again.
DEPRECIATED LESSON
In the last lesson, you learned of a new data type called Date. This data type is very cool, in that it can grab the up-to-the-second month, day, year, hour, minute, and second, and give that information to you in an easily modified number form. This is how it works...
var the_date = new Date(); var month = the_date.getMonth(); var day = the_date.getDate() var year = the_date.getYear(); var hour = the_date.getHours(); var minute = the_date.getMinutes(); var second = the_date.getSeconds();
As you can see, you first have to create a date object via that first line. Thereafter, you call functions within that object to retrieve the information you're looking for.
Remember, it gives you all of the information in number form, so it's up to you to make it a string if you want to. Also, it gives hours in military time, but that is also easily remedied by a simple function. Finally, the minutes and seconds, if less than ten, don't include the 0 in front of the number. Also easily remedied. The following is a block of code that generates a real time clock in any form element on a web page:
var go = 1;
function makeItHappen()
{
var the_time = getTime();
window.document.time_form.time_text.value = the_time;
if(go)
{
setTimeout("makeItHappen();", 500);
}
}
function getTime()
{
var the_date = new Date();
var month = the_date.getMonth();
var day = the_date.getDate()
var year = the_date.getYear();
var hour = the_date.getHours();
var minute = the_date.getMinutes();
var second = the_date.getSeconds();
month = monthNumToString(month);
if(minute < 10 || second < 10)
{
if(minute < 10)
{
minute = addZero(minute);
}
if(second < 10)
{
second = addZero(second);
}
}
if(hour >= 12)
{
hour = MilToCiv(hour);
second += " PM";
}else
{
second += " AM";
}
return (month + " " + day + ", " + year +
"; " + hour + ":" + minute + ":" + second);
}
function monthNumToString(month)
{
if(month == 1)
{
return "January";
}
if(month == 2)
{
return "Febuary";
}
if(month == 3)
{
return "March";
}
if(month == 4)
{
return "April";
}
if(month == 5)
{
return "May";
}
if(month == 6)
{
return "June";
}
if(month == 7)
{
return "July";
}
if(month == 8)
{
return "August";
}
if(month == 9)
{
return "September";
}
if(month == 10)
{
return "October";
}
if(month == 11)
{
return "November";
}
if(month == 12)
{
return "December";
}
}
function addZero(number)
{
return ("0" + number);
}
function MilToCiv(number)
{
if(number > 12)
{
return (number - 12);
}else
{
return 12;
}
}
All of that, when applied to a real form, will look like this:
Yes, it's a bit underwhelming, but that's what it takes. Don't forget - you can modify the time in any way you want - it doesn't have to be the "actual" time. Also, stopping and starting the clock is simple. Just set that variable go to zero. To start it back, just set go equal to 1, and call makeItHappen() again. These same concepts can also make a stopwatch - incidentally it doesn't require the use of the Date data type at all. Here it is:
If you wanna see the code behind this, search the source code for name=stop_form. One major limitation of this is that it may not keep accurate time. If your system is a little bogged down, it'll go slower. The clock doesn't have this limitation, though - if your system does run slower, the clock will just skip a second and catch back up occasionally. I recommend against trying to use milliseconds on the stopwatch though - trying to change the display that fast results in it running slower. Like so!
This isn't anything I did. I even set the setTimeout function to 1 (1/1000 of a second) and it doesn't go any faster. It is simply because the script can't run that fast. It still looks spiffy, but it goes up 1 second for every 3 or so "real time" seconds.