Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

startdate calendar for second date input

Posted on 2008-10-11
4
347 Views
Last Modified: 2013-11-11
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
Comment
Question by:1pc
  • 2
4 Comments
 
LVL 14

Expert Comment

by:raja_ind82
ID: 22695222
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
 

Author Comment

by:1pc
ID: 22738546
It's not a good solution: day+1 is not rigght for the end of the month...
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22750283
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
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22773516
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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question