GUI Components JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. GUI Components
  4. Fancy Time Picker


  


/*///////////The following is from   Sihui Wu ////
Dear Webmaster, 
I discovered a bug in the javascript published on your
website for 
http://www.rntsoft.com/Code/JavaScript/GUI-Components/FancyTimePicker.htm
the owner has written a very good script for free
usage, however, the lines
hideElement( 'SELECT',
document.getElementById("calendar") );
hideElement( 'APPLET',
document.getElementById("calendar") );   
should be changed to 
hideElement( 'SELECT',
document.getElementById("timepicker") );
hideElement( 'APPLET',
document.getElementById("timepicker") );  
failure to do so leads to page error on internet
explorer 6, when 2 or more timepicker were used on the
same page. Most importantly, the function
"hideElement" will fail, leading to incorrect display
on internet explorer 6.
Testing on internet explorer 7 managed to display the
timepicker div correctly (above the select), but page
error is still prompted.
Thank you for sharing the javascript. Attached is the
corrected script.
Regards, 
Wu Sihui
*/
/////////////////////////////////Here is the fix from Sihui Wu 
/////////////////////////////////Here is the fix from Sihui Wu 
/////////////////////////////////Here is the fix from Sihui Wu 
/////////////////////////////////Here is the fix from Sihui Wu 
/*
  var imagePath='../images/';
  
  var ie=document.all;
  var dom=document.getElementById;
  var ns4=document.layers;
  var bShow=false;
  var textCtl;
  function setTimePicker(t) {
    textCtl.value=t;
    closeTimePicker();
  }
  function refreshTimePicker(mode) {
    
    if (mode==0)
      { 
        suffix="AM"; 
      }
    else
      { 
        suffix="PM"; 
      }
    sHTML = "";
      }
      sHTML+="";
    }
    sHTML += "
";
    for (i=0;i<12;i++) {
      sHTML+="";
      if (i==0) {
        hr = 12;
      }
      else {
        hr=i;
      }  
      for (j=0;j<4;j++) {
        sHTML+="        hr + ":" + padZero(j*15) + " " + suffix 
        + "\")'>        "\")'>" + hr + ":"+padZero(j*15) +" "+ "" + suffix + " 
";
    document.getElementById("timePickerContent").innerHTML = sHTML;
  }
  if (dom){
    document.write (" Select Time   
");
    refreshTimePicker(0);
  }
  var crossobj=(dom)?document.getElementById("timepicker").style : ie? document.all.timepicker : document.timepicker;
  var currentCtl
  function selectTime(ctl,ctl2) {
    var leftpos=0
    var toppos=0
    textCtl=ctl2;
    currentCtl = ctl
    currentCtl.src=imagePath + "timepicker2.gif";
    aTag = ctl
    do {
      aTag = aTag.offsetParent;
      leftpos  += aTag.offsetLeft;
      toppos += aTag.offsetTop;
    } while(aTag.tagName!="BODY");
    crossobj.left =  ctl.offsetLeft  + leftpos 
    crossobj.top = ctl.offsetTop +  toppos + ctl.offsetHeight +  2 
    crossobj.visibility=(dom||ie)? "visible" : "show"
    hideElement( 'SELECT', document.getElementById("timepicker") );
    hideElement( 'APPLET', document.getElementById("timepicker") );      
    bShow = true;
  }
  // hides  and  objects (for IE only)
  function showElement( elmID ){
    if( ie ){
      for( i = 0; i < document.all.tags( elmID ).length; i++ ){
        obj = document.all.tags( elmID )[i];
        if( !obj || !obj.offsetParent ){
            continue;
        }
        obj.style.visibility = "";
      }
    }
  }
  function closeTimePicker() {
    crossobj.visibility="hidden"
    showElement( 'SELECT' );
    showElement( 'APPLET' );
    currentCtl.src=imagePath + "timepicker.gif"
  }
  document.onkeypress = function hideTimePicker1 () { 
    if (event.keyCode==27){
      if (!bShow){
        closeTimePicker();
      }
    }
  }
  function isDigit(c) {
    
    return ((c=='0')||(c=='1')||(c=='2')||(c=='3')||(c=='4')||(c=='5')||(c=='6')||(c=='7')||(c=='8')||(c=='9'))
  }
  function isNumeric(n) {
    
    num = parseInt(n,10);
    return !isNaN(num);
  }
  function padZero(n) {
    v="";
    if (n<10){ 
      return ('0'+n);
    }
    else
    {
      return n;
    }
  }
  function validateDatePicker(ctl) {
    t=ctl.value.toLowerCase();
    t=t.replace(" ","");
    t=t.replace(".",":");
    t=t.replace("-","");
    if ((isNumeric(t))&&(t.length==4))
    {
      t=t.charAt(0)+t.charAt(1)+":"+t.charAt(2)+t.charAt(3);
    }
    var t=new String(t);
    tl=t.length;
    if (tl==1 ) {
      if (isDigit(t)) {
        ctl.value=t+":00 am";
      }
      else {
        return false;
      }
    }
    else if (tl==2) {
      if (isNumeric(t)) {
        if (parseInt(t,10)<13){
          if (t.charAt(1)!=":") {
            ctl.value= t + ':00 am';
          } 
          else {
            ctl.value= t + '00 am';
          }
        }
        else if (parseInt(t,10)==24) {
          ctl.value= "0:00 am";
        }
        else if (parseInt(t,10)<24) {
          if (t.charAt(1)!=":") {
            ctl.value= (t-12) + ':00 pm';
          } 
          else {
            ctl.value= (t-12) + '00 pm';
          }
        }
        else if (parseInt(t,10)<=60) {
          ctl.value= '0:'+padZero(t)+' am';
        }
        else {
          ctl.value= '1:'+padZero(t%60)+' am';
        }
      }
      else
           {
        if ((t.charAt(0)==":")&&(isDigit(t.charAt(1)))) {
          ctl.value = "0:" + padZero(parseInt(t.charAt(1),10)) + " am";
        }
        else {
          return false;
        }
      }
    }
    else if (tl>=3) {
      var arr = t.split(":");
      if (t.indexOf(":") > 0)
      {
        hr=parseInt(arr[0],10);
        mn=parseInt(arr[1],10);
        if (t.indexOf("pm")>0) {
          mode="pm";
        }
        else {
          mode="am";
        }
        if (isNaN(hr)) {
          hr=0;
        } else {
          if (hr>24) {
            return false;
          }
          else if (hr==24) {
            mode="am";
            hr=0;
          }
          else if (hr>12) {
            mode="pm";
            hr-=12;
          }
        }
      
        if (isNaN(mn)) {
          mn=0;
        }
        else {
          if (mn>60) {
            mn=mn%60;
            hr+=1;
          }
        }
      } else {
        hr=parseInt(arr[0],10);
        if (isNaN(hr)) {
          hr=0;
        } else {
          if (hr>24) {
            return false;
          }
          else if (hr==24) {
            mode="am";
            hr=0;
          }
          else if (hr>12) {
            mode="pm";
            hr-=12;
          }
        }
        mn = 0;
      }
      
      if (hr==24) {
        hr=0;
        mode="am";
      }
      ctl.value=hr+":"+padZero(mn)+" "+mode;
    }
  }
*/
/////////////////// Here is the original which is from Tan Ling wee
/////////////////// Here is the original which is from Tan Ling wee
/////////////////// Here is the original which is from Tan Ling wee
/////////////////// Here is the original which is from Tan Ling wee
///////////////////  Here is the original which is from Tan Ling wee
//  Written by Tan Ling wee
//  on 19 June 2005
//  email :  info@sparrowscripts.com
//    url : www.sparrowscripts.com
  var imagePath='timePickerImages/';
  
  var ie=document.all;
  var dom=document.getElementById;
  var ns4=document.layers;
  var bShow=false;
  var textCtl;
  function setTimePicker(t) {
    textCtl.value=t;
    closeTimePicker();
  }
  function refreshTimePicker(mode) {
    
    if (mode==0)
      { 
        suffix="am"; 
      }
    else
      { 
        suffix="pm"; 
      }
    sHTML = "";
      }
      sHTML+="";
    }
    sHTML += "
";
    for (i=0;i<=11;i++) {
      sHTML+="";
      if (i==0) {
        hr = 12;
      }
      else {
        hr=i;
      }  
      for (j=0;j<4;j++) {
        sHTML+="" + hr + ":"+padZero(j*15) + "" + suffix + "
";
    document.getElementById("timePickerContent").innerHTML = sHTML;
  }
  if (dom){
    document.write ("  Select a Time    ");
    refreshTimePicker(0);
  }
  var crossobj=(dom)?document.getElementById("timepicker").style : ie? document.all.timepicker : document.timepicker;
  var currentCtl
  function selectTime(ctl,ctl2) {
    var leftpos=0
    var toppos=0
    textCtl=ctl2;
    currentCtl = ctl
    currentCtl.src=imagePath + "timepicker2.gif";
    aTag = ctl
    do {
      aTag = aTag.offsetParent;
      leftpos  += aTag.offsetLeft;
      toppos += aTag.offsetTop;
    } while(aTag.tagName!="BODY");
    crossobj.left =  ctl.offsetLeft  + leftpos 
    crossobj.top = ctl.offsetTop +  toppos + ctl.offsetHeight +  2 
    crossobj.visibility=(dom||ie)? "visible" : "show"
    hideElement( 'SELECT', document.getElementById("calendar") );
    hideElement( 'APPLET', document.getElementById("calendar") );      
    bShow = true;
  }
  // hides  and  objects (for IE only)
  function showElement( elmID ){
    if( ie ){
      for( i = 0; i < document.all.tags( elmID ).length; i++ ){
        obj = document.all.tags( elmID )[i];
        if( !obj || !obj.offsetParent ){
            continue;
        }
        obj.style.visibility = "";
      }
    }
  }
  function closeTimePicker() {
    crossobj.visibility="hidden"
    showElement( 'SELECT' );
    showElement( 'APPLET' );
    currentCtl.src=imagePath + "timepicker.gif"
  }
  document.onkeypress = function hideTimePicker1 () { 
    if (event.keyCode==27){
      if (!bShow){
        closeTimePicker();
      }
    }
  }
  function isDigit(c) {
    
    return ((c=='0')||(c=='1')||(c=='2')||(c=='3')||(c=='4')||(c=='5')||(c=='6')||(c=='7')||(c=='8')||(c=='9'))
  }
  function isNumeric(n) {
    
    num = parseInt(n,10);
    return !isNaN(num);
  }
  function padZero(n) {
    v="";
    if (n<10){ 
      return ('0'+n);
    }
    else
    {
      return n;
    }
  }
  function validateDatePicker(ctl) {
    t=ctl.value.toLowerCase();
    t=t.replace(" ","");
    t=t.replace(".",":");
    t=t.replace("-","");
    if ((isNumeric(t))&&(t.length==4))
    {
      t=t.charAt(0)+t.charAt(1)+":"+t.charAt(2)+t.charAt(3);
    }
    var t=new String(t);
    tl=t.length;
    if (tl==1 ) {
      if (isDigit(t)) {
        ctl.value=t+":00 am";
      }
      else {
        return false;
      }
    }
    else if (tl==2) {
      if (isNumeric(t)) {
        if (parseInt(t,10)<13){
          if (t.charAt(1)!=":") {
            ctl.value= t + ':00 am';
          } 
          else {
            ctl.value= t + '00 am';
          }
        }
        else if (parseInt(t,10)==24) {
          ctl.value= "0:00 am";
        }
        else if (parseInt(t,10)<24) {
          if (t.charAt(1)!=":") {
            ctl.value= (t-12) + ':00 pm';
          } 
          else {
            ctl.value= (t-12) + '00 pm';
          }
        }
        else if (parseInt(t,10)<=60) {
          ctl.value= '0:'+padZero(t)+' am';
        }
        else {
          ctl.value= '1:'+padZero(t%60)+' am';
        }
      }
      else
           {
        if ((t.charAt(0)==":")&&(isDigit(t.charAt(1)))) {
          ctl.value = "0:" + padZero(parseInt(t.charAt(1),10)) + " am";
        }
        else {
          return false;
        }
      }
    }
    else if (tl>=3) {
      var arr = t.split(":");
      if (t.indexOf(":") > 0)
      {
        hr=parseInt(arr[0],10);
        mn=parseInt(arr[1],10);
        if (t.indexOf("pm")>0) {
          mode="pm";
        }
        else {
          mode="am";
        }
        if (isNaN(hr)) {
          hr=0;
        } else {
          if (hr>24) {
            return false;
          }
          else if (hr==24) {
            mode="am";
            hr=0;
          }
          else if (hr>12) {
            mode="pm";
            hr-=12;
          }
        }
      
        if (isNaN(mn)) {
          mn=0;
        }
        else {
          if (mn>60) {
            mn=mn%60;
            hr+=1;
          }
        }
      } else {
        hr=parseInt(arr[0],10);
        if (isNaN(hr)) {
          hr=0;
        } else {
          if (hr>24) {
            return false;
          }
          else if (hr==24) {
            mode="am";
            hr=0;
          }
          else if (hr>12) {
            mode="pm";
            hr-=12;
          }
        }
        mn = 0;
      }
      
      if (hr==24) {
        hr=0;
        mode="am";
      }
      ctl.value=hr+":"+padZero(mn)+" "+mode;
    }
  }


  
    
      
      
    
  



           
       
timepicker.zip( 20 k)