Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 387
  • Last Modified:

startdate calendar for second date input

I created a form with 2 dates input (one for 'arrive' and a second for 'depart'), controlled by a javascript 'datepicker.js'. This datepicker is so nice that I don't want to change it with other calendars.
At this moment the first date you can selected from this datepicker is the current date.
How can I change the startdate for the second date input.
I would like to change the startdate into the first selected day + 1 day.
/* FORM */
 
<html>
<head>
<script src="datepicker.js"></script>
</head>
<body>
<form name='form1' action="<?php echo $PHP_SELF; ?>">
<table>
<tr>
<td>
<input name="date1" id="date1" type="text" onFocus="this.select();lcs(this)" onClick="event.cancelBubble=true;this.select();lcs(this)" value="<?php if (isset($_GET['date1'])){echo $_GET[date1];} ?>">
</td>
<td>
<input name="date2" id="date2" type="text" onFocus="this.select();lcs(this)" onClick="event.cancelBubble=true;this.select();lcs(this)" value="<?php if (isset($_GET['date2'])){echo $_GET[date2];} ?>">
</td>
</tr>
</table>
</form>
</body>
</html>
 
 
 
/* datepicker.js */
 
function getObj(objID){
    if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
	}
 
function checkClick(e) {
	e?evt=e:evt=event;
	CSE=evt.target?evt.target:evt.srcElement;
	if (getObj('fc'))
	if (!isChild(CSE,getObj('fc')))	getObj('fc').style.display='none';
	}
 
function isChild(s,d) {
	while(s) {
		if (s==d) return true;
		s=s.parentNode;
		}
	return false;
	}
 
function Left(obj){
	var curleft = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
			}
		}
	else if (obj.x)	curleft += obj.x;
	return curleft;
}
 
function Top(obj){
	var curtop = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curtop += obj.offsetTop
			obj = obj.offsetParent;
			}
		}
	else if (obj.y)	curtop += obj.y;
	return curtop;
	}
	
document.write('<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellpadding=2>');
document.write('<tr><td style="cursor:pointer" onclick="csubm()"><img src="arrowleftmonth.gif"></td><td colspan=5 id="mns" align="center" style="font:bold 13px Arial"></td><td align="right" style="cursor:pointer" onclick="caddm()"><img src="arrowrightmonth.gif"></td></tr>');
document.write('<tr><td align=center style="background:#ABABAB;font:12px Arial">ma</td><td align=center style="background:#ABABAB;font:12px Arial">di</td><td align=center style="background:#ABABAB;font:12px Arial">wo</td><td align=center style="background:#ABABAB;font:12px Arial">do</td><td align=center style="background:#ABABAB;font:12px Arial">vr</td><td align=center style="background:#ABABAB;font:12px Arial">za</td><td align=center style="background:#ABABAB;font:12px Arial">zo</td></tr>');
for(var kk=1;kk<=6;kk++) {
	document.write('<tr>');
	for(var tt=1;tt<=7;tt++) {
		num=7 * (kk-1) - (-tt);
		document.write('<td id="v' + num + '" style="width:18px;height:18px">&nbsp;</td>');
		}
	document.write('</tr>');
	}
document.write('</table>');
document.all?document.attachEvent('onclick',checkClick):document.addEventListener('click',checkClick,false);
 
 
var now = new Date;
var sccm=now.getMonth();
var sccy=now.getFullYear();
var ccm=now.getMonth();
var ccy=now.getFullYear();
 
var updobj;
function lcs(ielem) {
	updobj=ielem;
	getObj('fc').style.left=Left(ielem);
	getObj('fc').style.top=Top(ielem)+ielem.offsetHeight;
	getObj('fc').style.display='';
	
	// First check date is valid
	curdt=ielem.value;
	curdtarr=curdt.split('/');
	isdt=true;
	for(var k=0;k<curdtarr.length;k++) {
		if (isNaN(curdtarr[k]))	isdt=false;
		}
	if (isdt&(curdtarr.length==3)) {
		ccm=curdtarr[1]-1;
		ccy=curdtarr[2];
		prepcalendar(curdtarr[0],curdtarr[1]-1,curdtarr[2]);
		}
	}
 
function evtTgt(e){
	var el;
	if(e.target)el=e.target;
	else if(e.srcElement)el=e.srcElement;
	if(el.nodeType==3)el=el.parentNode; // defeat Safari bug
	return el;
	}
 
function EvtObj(e){
	if(!e)e=window.event;return e;
	}
function cs_over(e) {evtTgt(EvtObj(e)).style.background='#FFCC66';}
function cs_out(e) {evtTgt(EvtObj(e)).style.background='#C4D3EA';}
function cs_click(e) {
	updobj.value=calvalarr[evtTgt(EvtObj(e)).id.substring(1,evtTgt(EvtObj(e)).id.length)];
	getObj('fc').style.display='none';
	}
var mn=new Array('jan','feb','mar','apr','mai','jun','jul','aug','sep','okt','nov','dec');
var mnn=new Array('31','28','31','30','31','30','31','31','30','31','30','31');
var mnl=new Array('31','29','31','30','31','30','31','31','30','31','30','31');
var calvalarr=new Array(42);
 
function f_cps(obj) {
	obj.style.background='#C4D3EA';
	obj.style.font='12px Arial';
	obj.style.color='#333333';
	obj.style.textAlign='center';
	obj.style.textDecoration='none';
	obj.style.border='1px solid #6487AE';
	obj.style.cursor='pointer';
	}
 
function f_cpps(obj) {
	obj.style.background='#C4D3EA';
	obj.style.font='12px Arial';
	obj.style.color='#ABABAB';
	obj.style.textAlign='center';
	//obj.style.textDecoration='line-through';
	obj.style.border='1px solid #6487AE';
	obj.style.cursor='default';
	}
 
function f_hds(obj) {
	obj.style.background='#FFF799';
	obj.style.font='bold 11px Arial';
	obj.style.color='#333333';
	obj.style.textAlign='center';
	obj.style.border='1px solid #6487AE';
	obj.style.cursor='pointer';
	}
 
// day selected
function prepcalendar(hd,cm,cy) {
	now=new Date();
	sd=now.getDate();
	td=new Date();
	td.setDate(1);
	td.setFullYear(cy);
	td.setMonth(cm);
	cd=td.getDay();
	cd = cd == 0 ? 6 : cd-1;
	getObj('mns').innerHTML=mn[cm]+ ' ' + cy;
	marr=((cy%4)==0)?mnl:mnn;
	for(var d=1;d<=42;d++) {
		f_cps(getObj('v'+parseInt(d)));
		if ((d >= (cd -(-1))) && (d<=cd-(-marr[cm]))) {
			dip=((d-cd < sd)&&(cm==sccm)&&(cy==sccy));
			htd=((hd!='')&&(d-cd==hd));
			if (dip)
				f_cpps(getObj('v'+parseInt(d)));
			else if (htd)
				f_hds(getObj('v'+parseInt(d)));
			else
				f_cps(getObj('v'+parseInt(d)));
 
			getObj('v'+parseInt(d)).onmouseover=(dip)?null:cs_over;
			getObj('v'+parseInt(d)).onmouseout=(dip)?null:cs_out;
			getObj('v'+parseInt(d)).onclick=(dip)?null:cs_click;
			
			getObj('v'+parseInt(d)).innerHTML=d-cd;	
			calvalarr[d]=''+(d-cd)+'/'+(cm-(-1))+'/'+cy;
		}
		else {
			getObj('v'+d).innerHTML='&nbsp;';
			getObj('v'+parseInt(d)).onmouseover=null;
			getObj('v'+parseInt(d)).onmouseout=null;
			getObj('v'+parseInt(d)).style.cursor='default';
			}
	}
}
 
prepcalendar('',ccm,ccy);
//getObj('fc'+cc).style.visibility='hidden';
 
function caddm() {
	marr=((ccy%4)==0)?mnl:mnn;
 
	ccm+=1;
	if (ccm>=12) {
		ccm=0;
		ccy++;
		}
	cdayf();
	prepcalendar('',ccm,ccy);
	}
 
function csubm() {
	marr=((ccy%4)==0)?mnl:mnn;
	
	ccm-=1;
	if (ccm<0) {
		ccm=11;
		ccy--;
		}
	cdayf();
	prepcalendar('',ccm,ccy);
	}
 
function cdayf() {
	if ((ccy>sccy)|((ccy==sccy)&&(ccm>=sccm))) return;
	else {
		ccy=sccy;
		ccm=sccm;
		cfd=scfd;
		}
	}

Open in new window

0
1pc
Asked:
1pc
  • 2
1 Solution
 
raja_ind82Commented:
i just giving one workaround for this. once you select the date in first textbox, this will fill the nextdate in second textbox.

Add the following lines in "function cs_click(e) {". After updobj.value assignment statement.

var dateArray=updobj.value.split("/");
      if(updobj.name="date1")
            document.getElementById("date2").value=(parseInt(dateArray[0])+1)+"/"+dateArray[1]+"/"+dateArray[2];


Regards,
M.Raja
0
 
1pcAuthor Commented:
It's not a good solution: day+1 is not rigght for the end of the month...
0
 
sh0eCommented:
add now = new Date as indicated below.
//datepicker.js:
var now = new Date;now = new Date(now.getTime() + 86400000);
 
function prepcalendar(hd,cm,cy) {
        now=new Date();now = new Date(now.getTime() + 86400000);

Open in new window

0
 
sh0eCommented:
Just in case you have trouble finding where to put the code I posted, I've posted full working source for the page.
<html>
<head>
<script type="text/javascript">
 
/* datepicker.js */
 
function getObj(objID){
    if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
        }
 
function checkClick(e) {
        e?evt=e:evt=event;
        CSE=evt.target?evt.target:evt.srcElement;
        if (getObj('fc'))
        if (!isChild(CSE,getObj('fc'))) getObj('fc').style.display='none';
        }
 
function isChild(s,d) {
        while(s) {
                if (s==d) return true;
                s=s.parentNode;
                }
        return false;
        }
 
function Left(obj){
        var curleft = 0;
        if (obj.offsetParent){
                while (obj.offsetParent){
                        curleft += obj.offsetLeft
                        obj = obj.offsetParent;
                        }
                }
        else if (obj.x) curleft += obj.x;
        return curleft;
}
 
function Top(obj){
        var curtop = 0;
        if (obj.offsetParent){
                while (obj.offsetParent){
                        curtop += obj.offsetTop
                        obj = obj.offsetParent;
                        }
                }
        else if (obj.y) curtop += obj.y;
        return curtop;
        }
        
document.write('<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellpadding=2>');
document.write('<tr><td style="cursor:pointer" onclick="csubm()"><img src="arrowleftmonth.gif"></td><td colspan=5 id="mns" align="center" style="font:bold 13px Arial"></td><td align="right" style="cursor:pointer" onclick="caddm()"><img src="arrowrightmonth.gif"></td></tr>');
document.write('<tr><td align=center style="background:#ABABAB;font:12px Arial">ma</td><td align=center style="background:#ABABAB;font:12px Arial">di</td><td align=center style="background:#ABABAB;font:12px Arial">wo</td><td align=center style="background:#ABABAB;font:12px Arial">do</td><td align=center style="background:#ABABAB;font:12px Arial">vr</td><td align=center style="background:#ABABAB;font:12px Arial">za</td><td align=center style="background:#ABABAB;font:12px Arial">zo</td></tr>');
for(var kk=1;kk<=6;kk++) {
        document.write('<tr>');
        for(var tt=1;tt<=7;tt++) {
                num=7 * (kk-1) - (-tt);
                document.write('<td id="v' + num + '" style="width:18px;height:18px"> </td>');
                }
        document.write('</tr>');
        }
document.write('</table>');
document.all?document.attachEvent('onclick',checkClick):document.addEventListener('click',checkClick,false);
 
 
var now = new Date;now = new Date(now.getTime() + 86400000);
var sccm=now.getMonth();
var sccy=now.getFullYear();
var ccm=now.getMonth();
var ccy=now.getFullYear();
 
var updobj;
function lcs(ielem) {
        updobj=ielem;
        getObj('fc').style.left=Left(ielem);
        getObj('fc').style.top=Top(ielem)+ielem.offsetHeight;
        getObj('fc').style.display='';
        
        // First check date is valid
        curdt=ielem.value;
        curdtarr=curdt.split('/');
        isdt=true;
        for(var k=0;k<curdtarr.length;k++) {
                if (isNaN(curdtarr[k])) isdt=false;
                }
        if (isdt&(curdtarr.length==3)) {
                ccm=curdtarr[1]-1;
                ccy=curdtarr[2];
                prepcalendar(curdtarr[0],curdtarr[1]-1,curdtarr[2]);
                }
        }
 
function evtTgt(e){
        var el;
        if(e.target)el=e.target;
        else if(e.srcElement)el=e.srcElement;
        if(el.nodeType==3)el=el.parentNode; // defeat Safari bug
        return el;
        }
 
function EvtObj(e){
        if(!e)e=window.event;return e;
        }
function cs_over(e) {evtTgt(EvtObj(e)).style.background='#FFCC66';}
function cs_out(e) {evtTgt(EvtObj(e)).style.background='#C4D3EA';}
function cs_click(e) {
        updobj.value=calvalarr[evtTgt(EvtObj(e)).id.substring(1,evtTgt(EvtObj(e)).id.length)];
        getObj('fc').style.display='none';
        }
var mn=new Array('jan','feb','mar','apr','mai','jun','jul','aug','sep','okt','nov','dec');
var mnn=new Array('31','28','31','30','31','30','31','31','30','31','30','31');
var mnl=new Array('31','29','31','30','31','30','31','31','30','31','30','31');
var calvalarr=new Array(42);
 
function f_cps(obj) {
        obj.style.background='#C4D3EA';
        obj.style.font='12px Arial';
        obj.style.color='#333333';
        obj.style.textAlign='center';
        obj.style.textDecoration='none';
        obj.style.border='1px solid #6487AE';
        obj.style.cursor='pointer';
        }
 
function f_cpps(obj) {
        obj.style.background='#C4D3EA';
        obj.style.font='12px Arial';
        obj.style.color='#ABABAB';
        obj.style.textAlign='center';
        //obj.style.textDecoration='line-through';
        obj.style.border='1px solid #6487AE';
        obj.style.cursor='default';
        }
 
function f_hds(obj) {
        obj.style.background='#FFF799';
        obj.style.font='bold 11px Arial';
        obj.style.color='#333333';
        obj.style.textAlign='center';
        obj.style.border='1px solid #6487AE';
        obj.style.cursor='pointer';
        }
 
// day selected
function prepcalendar(hd,cm,cy) {
        now=new Date();now = new Date(now.getTime() + 86400000);
        sd=now.getDate();
        td=new Date();
        td.setDate(1);
        td.setFullYear(cy);
        td.setMonth(cm);
        cd=td.getDay();
        cd = cd == 0 ? 6 : cd-1;
        getObj('mns').innerHTML=mn[cm]+ ' ' + cy;
        marr=((cy%4)==0)?mnl:mnn;
        for(var d=1;d<=42;d++) {
                f_cps(getObj('v'+parseInt(d)));
                if ((d >= (cd -(-1))) && (d<=cd-(-marr[cm]))) {
                        dip=((d-cd < sd)&&(cm==sccm)&&(cy==sccy));
                        htd=((hd!='')&&(d-cd==hd));
                        if (dip)
                                f_cpps(getObj('v'+parseInt(d)));
                        else if (htd)
                                f_hds(getObj('v'+parseInt(d)));
                        else
                                f_cps(getObj('v'+parseInt(d)));
 
                        getObj('v'+parseInt(d)).onmouseover=(dip)?null:cs_over;
                        getObj('v'+parseInt(d)).onmouseout=(dip)?null:cs_out;
                        getObj('v'+parseInt(d)).onclick=(dip)?null:cs_click;
                        
                        getObj('v'+parseInt(d)).innerHTML=d-cd; 
                        calvalarr[d]=''+(d-cd)+'/'+(cm-(-1))+'/'+cy;
                }
                else {
                        getObj('v'+d).innerHTML=' ';
                        getObj('v'+parseInt(d)).onmouseover=null;
                        getObj('v'+parseInt(d)).onmouseout=null;
                        getObj('v'+parseInt(d)).style.cursor='default';
                        }
        }
}
 
prepcalendar('',ccm,ccy);
//getObj('fc'+cc).style.visibility='hidden';
 
function caddm() {
        marr=((ccy%4)==0)?mnl:mnn;
 
        ccm+=1;
        if (ccm>=12) {
                ccm=0;
                ccy++;
                }
        cdayf();
        prepcalendar('',ccm,ccy);
        }
 
function csubm() {
        marr=((ccy%4)==0)?mnl:mnn;
        
        ccm-=1;
        if (ccm<0) {
                ccm=11;
                ccy--;
                }
        cdayf();
        prepcalendar('',ccm,ccy);
        }
 
function cdayf() {
        if ((ccy>sccy)|((ccy==sccy)&&(ccm>=sccm))) return;
        else {
                ccy=sccy;
                ccm=sccm;
                cfd=scfd;
                }
        }
</script>
</head>
<body>
<form name='form1' action="<?php echo $PHP_SELF; ?>">
<table>
<tr>
<td>
<input name="date1" id="date1" type="text" onFocus="this.select();lcs(this)" onClick="event.cancelBubble=true;this.select();lcs(this)" value="<?php if (isset($_GET['date1'])){echo $_GET[date1];} ?>">
</td>
<td>
<input name="date2" id="date2" type="text" onFocus="this.select();lcs(this)" onClick="event.cancelBubble=true;this.select();lcs(this)" value="<?php if (isset($_GET['date2'])){echo $_GET[date2];} ?>">
</td>
</tr>
</table>
</form>
</body>
</html>
 

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now