Solved

startdate calendar for second date input

Posted on 2008-10-11
4
358 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
[X]
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
  • 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

752 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