Javascript time formatting function

Monday December 27th, 2004
Posted in Programming  
E-Mail This Post/Page   

While working on a web application, I found myself with the need for a Javascript function that would format dates to a consistent state. Several different functions exist out on the internet to perform this task, but none were exactly what I was looking for. Most of them did a fairly decent job of taking a time like '6:45' and plugging the am or pm onto the end. Some even allowed military time so '20:30' would convert to '8:30 pm'. What I really needed was one that could format a time entered in a normal fashion, but also format if I enter a time like '0645' or '2315'. So, I wrote my own.

There is one support function required. It is a Javascript method that has the same function as VBScript Trim. The way the application is set up, a blank time is valid; so the script allows for a blank field. If a space is entered into the field, this function blanks it out. I found the function TrimString here.

PLAIN TEXT
JavaScript:
  1. function TrimString(sInString) {
  2.   sInString = sInString.replace( /^s+/g, "" );// strip leading
  3.   return sInString.replace( /s+$/g, "" );// strip trailing
  4. }

And, here is the main function. To use it, add 'javascript:formattime(this)' to the onBlur field for an input field.

PLAIN TEXT
JavaScript:
  1. function formattime(control)
  2.     {
  3.     var minhour = 6;        //This and higher is considered 'am'
  4.    
  5.     var timevalue = new String(control.value);
  6.     var errvalue = new String("");
  7.    
  8.     var minutes = new String("");
  9.     var hours = new String("");
  10.     var ampm = new String("");
  11.    
  12.     if (timevalue == "")
  13.         {
  14.         errvalue = "Blank";
  15.         }
  16.    
  17.     if (timevalue.indexOf(":")!=-1)
  18.     /*  This is a 'normal' time.  Split it out as necessary.  */
  19.         {
  20.         var tempArray = timevalue.split(":");
  21.         hours = tempArray[0];
  22.         if (isNaN(hours))
  23.         /*  First split is not a valid number, crash out  */
  24.             {
  25.             errvalue = "Yes";
  26.             }
  27.         else
  28.             {
  29.             /*  Make sure the number is between 0 and 23  */
  30.             if ((hours> 23) || (hours <0))
  31.                 {
  32.                 errvalue = "Yes";
  33.                 }
  34.             else
  35.                 {
  36.                 if (hours> 12)
  37.                     {
  38.                     hours = hours - 12;
  39.                     ampm = "pm";
  40.                     }
  41.                 else if (hours == 12)
  42.                     {
  43.                     ampm = "pm";
  44.                     }
  45.                 else if (hours == 0)
  46.                     {
  47.                     ampm = "am";
  48.                     hours = 12;
  49.                     }
  50.                 else
  51.                     {
  52.                     if (hours <minhour)
  53.                         {
  54.                         ampm = "pm";       
  55.                         }
  56.                     else
  57.                         {
  58.                         ampm = "am";
  59.                         }
  60.                     hours = hours;
  61.                     }
  62.                 }
  63.             }
  64.         /*  Gen the minutes   */
  65.         minutes = tempArray[1];
  66.         if (minutes.indexOf("a")> -1)
  67.             {
  68.             ampm = "am";
  69.             minutes = parseInt(minutes);
  70.             }
  71.         else if (minutes.indexOf("p")> -1)
  72.             {
  73.             ampm = "pm";
  74.             minutes = parseInt(minutes);
  75.             }
  76.         else
  77.             {
  78.             minutes = parseInt(minutes);
  79.             }
  80.         /*  Make sure the minutes are in a valid range (00-59)    */
  81.         if (isNaN(minutes))
  82.             {
  83.             errvalue = "Yes";
  84.             minutes = 0;    //Just to make sure for later
  85.             }
  86.         else
  87.             {
  88.             if ((minutes &lt;0) || (minutes> 59))
  89.                 {
  90.                 minutes = 0;
  91.                 errvalue = "Yes";
  92.                 }
  93.             else
  94.                 {
  95.                 //Minutes is valid
  96.                 if (minutes <10)
  97.                     {
  98.                     minutes = "0" + String(minutes);
  99.                     }
  100.                 else
  101.                     {
  102.                     minutes = minutes;
  103.                     }
  104.                 }
  105.             }
  106.         }
  107.     else
  108.     /*  Have to work a little harder  */
  109.         {
  110.         if (isNaN(timevalue))
  111.             {
  112.             errvalue = "Yes";
  113.             }
  114.         else
  115.             {
  116.             if ((timevalue.length == 3) || (timevalue.length ==4))
  117.                 {
  118.                 //Get the minutes
  119.                 minutes = timevalue.substr((timevalue.length -2), 2);
  120.                 if ((minutes>= 0) && (minutes <60))
  121.                     {
  122.                     //Ignore this
  123.                     }
  124.                 else
  125.                     {
  126.                     errvalue = "Yes";
  127.                     }
  128.                
  129.                 //Get the hours
  130.                 hours = timevalue.substr(0, (timevalue.length - 2));
  131.                 if ((hours <0) || (hours> 23))
  132.                     {
  133.                     errvalue = "Yes";
  134.                     }
  135.                 if (hours <10)
  136.                     {
  137.                     if (timevalue.substr(0,1)=="0")
  138.                         {
  139.                         if (hours == 0)
  140.                             {
  141.                             ampm = "am";
  142.                             hours = 12;
  143.                             }
  144.                         else
  145.                             {
  146.                             ampm = "am";
  147.                             }
  148.                         }
  149.                     else
  150.                         {
  151.                         if (hours <minhour)
  152.                             {
  153.                             ampm = "pm";
  154.                             }
  155.                         else
  156.                             {
  157.                             ampm = "am";
  158.                             }
  159.                         }
  160.                     }
  161.                 else
  162.                     {
  163.                     if ((hours == 10) || (hours == 11))
  164.                         {
  165.                         ampm = "am";
  166.                         }
  167.                     else if (hours == 12)
  168.                         {
  169.                         ampm = "pm";
  170.                         }
  171.                     else
  172.                         {
  173.                         ampm = "pm";
  174.                         hours = hours - 12;
  175.                         }
  176.                     }
  177.                 }
  178.             else
  179.                 {
  180.                 errvalue = "Yes";
  181.                 }
  182.             }
  183.         }
  184.     if (errvalue!="")
  185.     /*  There was an error    */   
  186.         {
  187.         if (TrimString(control.value)!="")
  188.             {
  189.             alert("You appear to have entered an invalid time.  Please correct it.");
  190.             control.select();
  191.             control.focus();
  192.             }
  193.         }
  194.     else
  195.         {
  196.         control.value = (hours * 1) + ":" + minutes + " " + ampm;
  197.         }
  198.    
  199.     }

Syntax highlighting code in WordPress blogs
A routine to create GUIDs in PHP
Javascript to limit input
file_get_contents function for PHP 4
Tips to keep your email address away from spammers

Leave a Comment

« 100 Oldest Domain Names Syntax highlighting code in WordPress blogs »