Useful Web Widgets

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.