JavaScript DHTML/GUI Components/Time Picker
Fancy Time Picker
<source lang="html4strict">
<html> <HEAD>
<STYLE> input { font-size:11px; } </STYLE>
</HEAD> <SCRIPT LANGUAGE="JavaScript">
/*///////////The following is from Sihui Wu <sihuiwsh (at) yahoo.ru>////
Dear Webmaster, I discovered a bug in the javascript published on your website for http://www.wbex.ru/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 = "
|
document.getElementById("timePickerContent").innerHTML = sHTML; } if (dom){document.write ("
| ||||
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 <select> and <applet> objects (for IE only) function hideElement( elmID, overDiv ){ if( ie ){ for( i = 0; i < document.all.tags( elmID ).length; i++ ){ obj = document.all.tags( elmID )[i]; if( !obj || !obj.offsetParent ){ continue; } // Find the element"s offsetTop and offsetLeft relative to the BODY tag. objLeft = obj.offsetLeft; objTop = obj.offsetTop; objParent = obj.offsetParent; while( objParent.tagName.toUpperCase() != "BODY" ) { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } objHeight = obj.offsetHeight; objWidth = obj.offsetWidth; if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft ); else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop ); else if( overDiv.offsetTop >= ( objTop + objHeight + obj.height )); else if( overDiv.offsetLeft >= ( objLeft + objWidth )); else { obj.style.visibility = "hidden"; } } } } //unhides <select> and <applet> 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.ru // url : www.sparrowscripts.ru
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 = "
|
document.getElementById("timePickerContent").innerHTML = sHTML; } if (dom){document.write ("
| ||||
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 <select> and <applet> objects (for IE only) function hideElement( elmID, overDiv ){ if( ie ){ for( i = 0; i < document.all.tags( elmID ).length; i++ ){ obj = document.all.tags( elmID )[i]; if( !obj || !obj.offsetParent ){ continue; } // Find the element"s offsetTop and offsetLeft relative to the BODY tag. objLeft = obj.offsetLeft; objTop = obj.offsetTop; objParent = obj.offsetParent; while( objParent.tagName.toUpperCase() != "BODY" ) { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } objHeight = obj.offsetHeight; objWidth = obj.offsetWidth; if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft ); else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop ); else if( overDiv.offsetTop >= ( objTop + objHeight + obj.height )); else if( overDiv.offsetLeft >= ( objLeft + objWidth )); else { obj.style.visibility = "hidden"; } } } } //unhides <select> and <applet> 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; } }
</SCRIPT> <body>
<input id="timepicker1" type="text" value="12:00 pm" size=8 maxlength=8 ONBLUR="validateDatePicker(this)"> | <IMG SRC="timePickerImages/timepicker.gif" BORDER="0" ALT="Pick a Time!" ONCLICK="selectTime(this,timepicker1)" STYLE="cursor:hand"> |
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/timepicker.zip">timepicker.zip( 20 k)</a>
Fancy Time Picker -- added new features! (by Mahesh Viswanathan "maheshvv2 at hotmail.com")
<source lang="html4strict">
hi, please see attached zip file for improvements to timepicker. i haven"t cleaned up the files & folder structure -- there are multiple (older) versions of javascript files, et al in the "timepicker" folder, left behind by the previous author. i"ve left this as-is. use either "multiSample.htm" or "multiSample2.htm" to view new functionality. best, mahesh
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/Mahesh_Viswanathan_timePicker.zip">Mahesh_Viswanathan_timePicker.zip( 47 k)</a>