- //****************************************************************************
- // jsDateSelect 1.1
- //****************************************************************************
- // Author: Maxx 1,5k <maxx@e-taller.net>
- // WWW: http://www.e-taller.net/dateselect/
- // Category: Date/Time
- // Description: A GUI control to select date in an HTML form.
- // Has been tested in MSIE4+, NN4, NN6, Mozilla.
- //****************************************************************************
- // The lib is FREEWARE. This means you can use it anywhere you want, you can
- // do anything with it. Author is NOT responsible for any consequences of
- // using this library.
- // If you don't agree with this, you SHOULD NOT use the lib.
- //****************************************************************************
- // All improvings, feature requests, bug reports, etc. are gladly accepted.
- //****************************************************************************
- // Note: For best viewing of the code Tab size 3 is recommended
- //****************************************************************************
- var NS = (document.all) ? false : true; // MSIE vs. Others
- var LAYERS = (document.layers) ? true : false; // NN4 vs. Others
- var calWinSize = [160,111];
- var calMonths = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
- var calWeek = ['Lu','Ma','Mi','Ju','Vi','Sá','Do'];
- var calMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31];
- var curInput = null;
- var yearFrom = 2009;
- var yearTo = yearFrom+10;
- var calUseTransit = false; // Whether to use transition alpha effects in MSIE
- var calOpacity = 100; // Final opacity of the control in MSIE
- var calOpacitySteps = 10; // Number of steps when changing opacity in MSIE
- if(LAYERS)
- document.write("<layer id=calMain visibility=hide bgcolor=#dddddd><br></layer>");
- else
- document.write("<div id=calMain class=cl_out style='position:absolute; display:none; background-color:#dddddd;'><br></div>");
- //****************************************************************************
- function calGetDate(dateBtn, dateField) {
- calPosX = (LAYERS) ? dateBtn.x : dateBtn.offsetLeft;
- calPosY = (LAYERS) ? dateBtn.y : dateBtn.offsetTop + dateBtn.offsetHeight;
- for(el=dateBtn.offsetParent; el!=null; el=el.offsetParent) {
- calPosX += el.offsetLeft; calPosY += el.offsetTop;
- }
- if(!LAYERS) {
- bodyWidth = (NS) ? document.body.offsetWidth : document.body.clientWidth-5;
- while((calPosX > 0) && ((calPosX+calWinSize[0]) > bodyWidth)) calPosX--;
- }
- curInput = (NS) ? dateField : dateField.name;
- curDate = dateField.value.split("/"); nowDate = new Date();
- curDate[1] = parseInt(curDate[1]); curDate[2] = parseInt(curDate[2]);
- if(curDate[1]); // WTF? I get a bug without this line
- calFillInside((((curDate[1]>=1)&&(curDate[1]<=12)) ? (curDate[1]-1) : nowDate.getMonth()), ((curDate[2]>=1900) ? curDate[2] : nowDate.getFullYear()));
- main = (LAYERS) ? document.layers.calMain : (NS) ? document.getElementById('calMain') : document.all.calMain;
- if(LAYERS) {
- main.left = calPosX; main.top = calPosY;
- main.visibility = "show";
- } else {
- main.style.left = calPosX; main.style.top = calPosY;
- if(NS||((!NS)&&(!calUseTransit))) main.style.display = ''; else calTransitShow(true, 0);
- }
- return false;
- }
- //****************************************************************************
- function calTransitShow(isShow, step) {
- obj = document.all.calMain;
- opStart = (isShow) ? 0 : calOpacity;
- opEnd = (isShow) ? calOpacity : 0;
- if(!step) {
- obj.style.filter = "alpha(opacity="+opStart+")";
- obj.style.display = "";
- setTimeout("calTransitShow("+isShow+","+(step+1)+")", 1);
- } else if(step <= (calOpacitySteps+1)) {
- opacity = parseInt( (opStart-opEnd) * (step-1) / calOpacitySteps );
- if(opacity < 0) opacity = -opacity;
- if(!isShow) opacity = 100 - opacity;
- obj.style.filter = "alpha(opacity="+opacity+")";
- setTimeout("calTransitShow("+isShow+","+(step+1)+")", 1);
- } else {
- obj.style.display = (isShow) ? "" : "none";
- }
- }
- //****************************************************************************
- function calExit(day, mon, yea) {
- if(LAYERS) {
- with(document.layers.calMain.document) {
- open("text/html"); write("<br>"); close();
- }
- document.layers.calMain.visibility = "hide";
- } else {
- obj = (NS) ? document.getElementById('calMain') : document.all.calMain;
- if(NS||((!NS)&&(!calUseTransit))) obj.style.display = "none"; else calTransitShow(false, 0);
- obj.innerHTML = "<br>";
- }
- if(curInput && day && (++mon) && yea) {
- curInputObj = (NS) ? curInput : document.all[curInput];
- curInputObj.value = ((day < 10)?"0":"")+day + "/" + ((mon < 10)?"0":"")+mon + "/" + yea;
- }
- return false;
- }
- //****************************************************************************
- function calFillInside(mon, yea) {
- date1 = new Date(yea, mon, 0);
- wek1 = date1.getDay(); monthdays = calMonthDays[mon] + (((mon == 1) && (!(yea % 4))) ? 1 : 0);
- main = (LAYERS) ? document.layers.calMain : (NS) ? document.getElementById('calMain') : document.all.calMain;
- if(LAYERS) {
- main.width = calWinSize[0];
- main.height = calWinSize[1] + (((monthdays + wek1) > 35) ? 16 : 0);
- } else {
- main.style.width = calWinSize[0];
- main.style.height = calWinSize[1] + (((monthdays + wek1) > 35) ? 16 : 0);
- }
- out="";
- if(LAYERS) {
- out += "<table border=1 width="+(4+calWinSize[0])+" cellspacing=1 cellpadding=0><tr><th>";
- out += "<div class=cl_dayns4>";
- out += "<a class=cl_dayns4 href='javascript:' onclick='return calFillInside("+((mon>0)?mon-1:11)+","+yea+");'><< </a>";
- out += calMonths[mon];
- out += "<a class=cl_dayns4 href='javascript:' onclick='return calFillInside("+((mon<11)?mon+1:0)+","+yea+");'> >></a>";
- out += "</div>";
- out += "</th><th>";
- out += "<div class=cl_dayns4>";
- out += "<a class=cl_dayns4 href='javascript:' onclick='return calFillInside("+mon+","+(yea-1)+");'><< </a>";
- out += yea;
- out += "<a class=cl_dayns4 href='javascript:' onclick='return calFillInside("+mon+","+(yea+1)+");'> >></a>";
- out += "</div>";
- out += "</th><th>";
- out += "<a class=cl_dayns4 href='javascript:' onclick='return calExit(0,0,0);'> X </a>";
- out += "</th></tr></table>";
- } else {
- out += "<table border=0 width=100% cellspacing=0 cellpadding=0><tr><th width=10% class=cl_out>";
- out += "<select name=calMon class=cl_sel onchange='calFillInside(this.value,"+yea+")'>";
- for(i=0; i<12; i++) out += "<option value="+i+((i==mon)?" selected":"")+">"+calMonths[i]+"</option>";
- out += "</select>";
- out += "</th><th width=10% class=cl_out>";
- out += "<select name=calYea class=cl_sel onchange='calFillInside("+mon+",this.value)'>";
- for(i=yearFrom; i<=yearTo; i++) out += "<option value="+i+((i==yea)?" selected":"")+">"+i+"</option>";
- out += "</select>";
- out += "</th><th class=cl_out>";
- out += "<a "+((NS)?"href='javascript:' ":"")+"style='cursor:hand; font:bold xx-small Verdana; color:black; width:100%; text-decoration:none;' onclick='return calExit(0,0,0);' title='Cerrar'>X</a><br>";
- out += "</th></tr></table>";
- }
- out += "<table width="+((LAYERS)?4+calWinSize[0]:"100%")+" border="+((LAYERS)?1:0)+" cellspacing=1 cellpadding=0 cols=7><tr>";
- for(i=0; i<7; i++) out += ((LAYERS) ? "<th class=cl_wek>"+calWeek[i]+"</th>" : "<th class=cl_out><div class=cl_wek>"+calWeek[i]+"</div></th>");
- out += "</tr>";
- if(wek1 > 0) {
- out += "<tr>";
- for(daycnt=0; daycnt<wek1; daycnt++) out += "<th></th>";
- } else daycnt = 0;
- for(i=0; i<31; i++) {
- if(i >= monthdays) break;
- if(!(daycnt % 7)) {
- if(daycnt > 0) out += "</tr>";
- out += "<tr>";
- }
- out += "<th class=cl_in onmouseover='this.className=\"cl_out\";' onmouseout='this.className=\"cl_in\";'>";
- out += "<a class=cl_day"+((LAYERS)?"ns4 ":" ")+((NS|LAYERS)?"href='javascript:' ":"")+"onclick='return calExit("+(i+1)+","+mon+","+yea+");'>"+(i+1)+"</a></th>";
- daycnt++;
- }
- out += "</tr></table>";
- if(LAYERS) {
- with(document.layers.calMain.document) {
- open("text/html"); write(out); close();
- }
- } else {
- obj = (NS) ? document.getElementById('calMain') : document.all.calMain;
- obj.innerHTML = out;
- }
- return false;
- }
Recent Pastes