Useful Web Widgets - The Function in Depth
(Page 3 of 5 )
The function accepts three arguments. The first argument is the format string, the second is the character to use as a separator between each value and the third is a boolean value to determine if we want to display the time.
function getFormattedDate(format,separator,time)
{
//get a date object
var curr_dt = new Date();
//make sure the format string is lower case
format = format.toLowerCase();
//make an array of the format
var tArr = format.split(",");
//create a default if the separator is not specified
if(separator == "")
{
separator = " ";
}
//a default format object
var formatObj = new Object();
formatObj.monthd = true;
formatObj.monthLong = true;
formatObj.dayd = true;
formatObj.dayLong = true;
formatObj.yearLong = true;
The format string can be optional, where you would simply pass an empty string and use the default format which is "dl,dl,l" but could be anything you like. if you wanted to make troubleshooting the function easier, you could certainly provide some validation for the format string using regular expressions at this point. If we aren't using the default, then we need to change default values before producing any date values.
if(format != "")
{
//handle month
if(tArr[0].charAt(0) == "t")
{
formatObj.monthd = false
}
if(tArr[0].charAt(1) == "s")
{
formatObj.monthLong = false;
}
//handle day
if(tArr[1].charAt(0) == "t")
{
formatObj.dayd = false;
}
if(tArr[1].charAt(1) == "s")
{
formatObj.dayLong = false;
}
//handle year
if(tArr[2].charAt(0) == "s")
{
formatObj.yearLong = false;
}
}
Now it's time to start generating the date string. First up is the month. We add leading zeros if the format is "long" or simply use the month number as is + 1 (because the output of getMonth() is 0-11). When the month format is text we can use the number derived from getMonth as an index for an array that contains the text versions.
//format month
var mon = "";
if(formatObj.monthd)
{
if(formatObj.monthLong)
{
mon = curr_dt.getMonth() + 1;
if(mon < 10)
{
mon = "0" + mon.toString();
}
}
else
{
mon = curr_dt.getMonth() + 1;
}
}
else
{
if(formatObj.monthLong)
{
var monthsArr = new Array("January","Febuary","March","April","May","June","July",
"August","September","October","November","December");
}
else
{
var monthsArr = new Array("Jan.","Feb.","Mar.","Apr.","May.","Jun.",
"Jul.","Aug.","Sept.","Oct.","Nov.","Dec.");
}
$tmp = curr_dt.getMonth();
mon = monthsArr[$tmp];;
}
Next is the day which is treated in a similar fashion. We also need to set up a text version of the day to be placed at the beginning of the date string when the day format is text.
//format day
var ddy = "";
var dy = "";
if(formatObj.dayd)
{
if(formatObj.dayLong)
{
ddy = curr_dt.getDate();
if(ddy < 10)
{
ddy = " 0" + ddy.toString() + " ";
}
}
else
{
ddy = " " + curr_dt.getDate()
+ " ";
}
}
else
{
if(formatObj.dayLong)
{
var dayArr = new Array
("Monday","Tuesday","Wednesday","Thursday",
"Friday","Saturday","Sunday");
ddy = " " + curr_dt.getDate() + " ";
}
else
{
var dayArr = new Array("Mon","Tues","Wed","Thurs","Fri","Sat","Sun");
ddy = " " + curr_dt.getDate() + " ";
}
var daytmp = curr_dt.getDate() - 1;
dy = dayArr[daytmp]
}
The next task is to get the year. This one is much simpler.
//format year
var yr = "";
if(formatObj.yearLong)
{
yr = curr_dt.getFullYear().toString();
}
else
{
yr = curr_dt.getFullYear().toString().substr(2,2);
}
The last part of the date string to generate is the time. This takes the most processing. This section could be modified to support more display formats in the same way the date does.
if(time)
{
var tm = "";
var hours = curr_dt.getHours();
var minutes = curr_dt.getMinutes();
//if minutes are 1-9 we need a leading
zero
if(minutes < 10)
{
minutes = "0" + minutes;
}
//new day starts unless you are a
programmer
if(hours == 0)
{
tm = 12 + ":" + minutes + " AM";
}
//the noon hour is here so tack on a PM
else if(hours == 12)
{
tm = hours + ":" + minutes + " PM";
}
//we are past noon. subtract 12 to start
at 1 and go up.
else if(hours > 12 )
{
tm = (hours - 12) + ":" + minutes + "
PM";
}
else
{
tm = hours + ":" + minutes + " AM";
}
}
After all that it's time to put it all together.
var final_str;
final_str = dy + " " + mon + separator + ddy +
separator + yr;
if(time)
{
final_str += " " + tm;
}
return final_str;
You can then return "final_str" and display it any way you wish.
Next: A Calendar Engine >>
More JavaScript Articles
More By Chris Root
/ 6 
