Solved

startdate calendar for second date input

Posted on 2008-10-11
4
333 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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now