Link to home
Start Free TrialLog in
Avatar of Nicola Siotto
Nicola SiottoFlag for United Arab Emirates

asked on

Date picker for HTML form page

I am making a reservation form on an HTML page that has check in and check out dates for a hotel reservation. The ideal would be something like the one Expedia has, meaning as soon as you enter in the field a date script will appear and prompt to chose one. Moreover the date should be dd/mm/yyyy.

Being a newbie the instruction should be very simple.

Thanks in advance for any help.
Avatar of Badotz
Badotz
Flag of United States of America image

Not to be impertinent, but have you downloaded the Date Picker from Expedia? Have you searched Google for "date picker"?
Avatar of Nicola Siotto

ASKER

No impertinence! Yes I have done so and either too complicated to implement for unexperts like me, or not what I need. Need no pop up if possible.
Well, complicated code is sometimes required to do even the simplest of things.

It might be time to re-evaluate what it is you really need. If you need a date picker, though, then you will have to find one you can live with and learn from.
As I said I would like to have one like Expedia has.
ASKER CERTIFIED SOLUTION
Avatar of Badotz
Badotz
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
btw, that is from expedia.com
And here is calx.js, also from expedia:
var cF=null;var cW=null;var g_tid=0;var g_cP,g_eD,g_eDP,g_dmin,g_dmax;
var nextFocus;var g_fNoCal=false;
 
function getEventObj(e){if(!e)e=window.event;return e;}
 
function stopBubble(e){e=getEventObj(e);e.cancelBubble=true;if(e.stopPropagation)e.stopPropagation();}
 
function CB(){stopBubble(event);}
 
function SCal(cP,eD,eDP,dmin,dmax){
 clearTimeout(g_tid);
 if(g_fNoCal){g_fNoCal=false;return;}
	if(g_calShown && eD==g_eD)return;
	g_calShown = true;
	g_calCB = null;
 g_cP=cP;
 g_eD=eD;
 g_eDP=eDP;
 g_dmin=dmin;
 g_dmax=dmax;
 WaitCal();}
function CancelCal(){clearTimeout(g_tid);if(!cF)cF=getObj('CalFrame');cF.style.visibility="hidden";g_calShown=false;}
function WaitCal()
{ 
 if(!cW)cW=frames['CalFrame'];
 
 if(null==cW||null==cW.g_fCL||false==cW.g_fCL){
	g_tid=setTimeout("WaitCal()", 200);
	}
 else{
 if(!cF)cF=getObj('CalFrame');
	cF.style.visibility="hidden";
	setTimeout("DoCal()",1);
	}
}
function DoCal(){PosCal(g_cP);
if(!cW)cW=frames['CalFrame'];
cW.DoCal(g_eD,g_eDP,g_dmin,g_dmax);}
 
function getScrollTop()
{
	if(document.documentElement.scrollTop) return document.documentElement.scrollTop;
	if(document.body.scrollTop) return document.body.scrollTop;
	if(window.pageYOffset) return window.pageYOffset;
	return 0;
}
 
function getWinHeight()
{
	if(window.innerHeight) return window.innerHeight;
	if(document.documentElement.clientHeight) return document.documentElement.clientHeight;
	if(document.body.clientHeight) return document.body.clientHeight;
	return 0;
}
 
function PosCal(cP)
{
	var dB=document.body;var eL=0;var eT=0;
 if(!cF)cF=getObj('CalFrame');
	for(var p=cP;p&&p.tagName!='BODY';p=p.offsetParent){eL+=p.offsetLeft;eT+=p.offsetTop;}
	var eH=cP.offsetHeight;var dH=parseInt(cF.style.height);var sT=getScrollTop();
	if(eT-dH>=sT&&eT+eH+dH>getWinHeight()+sT)eT-=dH;else eT+=eH;
	cF.style.left=eL+'px';cF.style.top=eT+'px';
}
 
function SetNextFocus(e){nextFocus=e;if(nextFocus)nextFocus.onfocus=CancelCal;}
function SetPrevFocus(e){if(e)e.onfocus=CancelCal;}
 
function FGoNextFocus(){if(nextFocus){nextFocus.focus();return true;}return false;}
 
function CalSetFocus(e){if(e){g_fNoCal=true;e.focus();setTimeout("EndCalFocus()", 200);}}
function EndCalFocus(){g_fNoCal=false;}
 
function CalDateSet(eInp,d,m,y,giveFocus)
{
	var ds=GetDateSep();
	var fmt=GetDateFmt();
 
	if(fmt=="mmddyy")eInp.value=m+ds+d+ds+y;
	else if(fmt=="ddmmyy")eInp.value=d+ds+m+ds+y;
	else eInp.value=y+ds+m+ds+d;
	if(!giveFocus)
	CalSetFocus(eInp);
}
 
var g_calShown = false;
function SetCalShown(fcshown){g_calShown=fcshown;}
 
var g_calCB;
function CalendarCallback(){if(g_calCB)g_calCB();}
function SetCalendarCallback(cb){g_calCB=cb;}
 
 
function GetInputDate(t)
{
	if(!t.length) return null;
	t=t.replace(/\s+/g,"");
	if(t.match(/[^-|\d|\.|\/]/)) return null;
	var rgt=t.split(/-|\.|\//);
	for(var i=0;i<rgt.length;i++) rgt[i]=parseInt(rgt[i],10);
	if(!rgt[1]) return null;
	var m,d,y;
	var fmt=GetDateFmt();
	if(fmt=="yymmdd")
	{
	if(!rgt[2]) return null;
	m=rgt[1];d=rgt[2];y=rgt[0];
	}
	else
	{
	if(fmt=="mmddyy"){m=rgt[0];d=rgt[1];}
	else{m=rgt[1];d=rgt[0];}//fmt=="ddmmyy"
	if(rgt[2])y=rgt[2];
	else y=DefYr(m-1,d);
	}
	m-=1;if(y<100)y+=2000;
	if(y<1601||y>4500||m<0||m>11||d<1||d>GetMonthCount(m,y))return null;
	return new Date(y,m,d);
}
 
var rM=new Array(12);rM[0]=rM[2]=rM[4]=rM[6]=rM[7]=rM[9]=rM[11]=31;rM[3]=rM[5]=rM[8]=rM[10]=30;rM[1]=28;
function GetMonthCount(m,y){var c=rM[m];if((1==m)&&IsLY(y))c++;return c;}
function IsLY(y){if(0==y%4&&((y%100!=0)||(y%400==0)))return true;else return false;}
function DefYr(m,d){var dt=new Date();var yC=(dt.getYear()<1000)?1900+dt.getYear():dt.getYear();if(m<dt.getMonth()||(m==dt.getMonth()&&d<dt.getDate()))yC++;return yC;}

Open in new window

Ok thanks. So back to basics. These two files are the js.

If you check the temporary HTML form: http://00632f3.netsolhost.com/dubaimania/hotel/tulipbarsha/prenotazione.html

Please consider I have put the two JS files in the same directory. How do I recall the function?

One last issue after solving the previous two. The dates should be in the following format: dd/mm/yyy.
have two date fields: Check IN and Check OUT as follows:
 
<input name="Check_in" type="text" style="width: 150px; height: 20px" />
<input name="Check_out" type="text" style="width: 150px; height: 20px" />

Open in new window

You will have to delve into the files to determine the date format.

The "Departing" input element looks like this:
<input id="fdt" name="fdt" value="mm/dd/yy" type="text" maxlength="12" class="small" style="margin-top:-1px;margin-bottom:-1px;"  onblur="Rem(this);UpdDt(this);" onclick="event.cancelBubble=true;SC(this);" onfocus="SC(this);" />

Open in new window

The secind function in "cal.js" is this:

function GetDateFmt() {return "mmddyy";}

I suggest you try changing it to this:

function GetDateFmt() {return "ddmmyy";}
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Badotz, sorry but I have created the two JS files as instructed and copied literally the input code but it doesn't work!
PascalHeraud, sorry but I already have various type of flat calendar scripts. I need a complete solution. I have an input field as shown above and I am seeking someone to help me implement it easy into my HTML page.
>>it doesn't work!

Meaning what, exactly?

Note that there may be other .JS files at expedia.com that *you* will have to copy.

You might be better off with the object PascalHeraud suggested - I looked at it, and it is a full-featured date picker. Not sure why it wouldn't work for you?
I have uploaded a sample HTML of what the two fields would look like. As I said I can't make it work and I am sure I am the reason, but if I were good at it I wouldn't have filed a question hrere first place. Many solutions are available also through Experts Exchange but I would ike to create a thread where a newbie looks and implements immediately the solution. Thanks!
datepick.txt
Good luck!

<unsubscribing>
Avatar of PascalHeraud
PascalHeraud

I still don't understand why a solution like dhtml Calendar could not be used. It's really good one (among many others)!

Dear Pascal, within Experts Exchange there are so many similar solutions therefore there wouldn't have been a need of opening another question to copy-paste already existing codes. What I was looking for is to build up a solution that step by step would explain to a newbie, very basic in HTML, from A-Z how to make a flat date pick on his HTML page. Everyone has failed so far to upload some files examples or make a detailed procedure that one for the first time could reach very easily such target. This although the points I am awarding are the max available for any question.
"Boy, I sure like to watch those F-16s fly overhead. I wonder if I just sat in the pilot's seat for a few minutes I would know how to fly one?"

EE is not an educational facility per se; it is a volunteer-based forum whereby questions are posed, and sometimes a solution is found.

In your initial post, there is no mention made of a "step-by-step newbie guide". What you are asking for is a complete, working solution for a (non-trivial?) web page. Many experts do just that for a living. You might be surprised to learn that they will not devote the time and energy for such a project without remuneration.

The date picker and javascript files previously provided might not be *exactly* what you are after, but have shown two ways to start. At some point *you* will have to do the work, I am afraid.

And it ain't always about the poinks ;-)
Badotz, although I like your humor, can I disagree with you?

EE is a solutions environment where are discussed questions at every level, that's why points are given in different quantity for each question, meaning the most difficult ones are given higher points. If we go through questions and answers we will find people asking how to create a basic button on an HTML page and also very complicate scripts know-how. If you inteded this forum only for IT nerds then I think you should go back some time where there where some guidelines on the aims why EE was created.

You jump into a question if you don't like it no ones obliges you to answer.

And to respond your statement for who does give expertise for a living, not everyone can afford it. Correct?

As for your statement on how I have asked the question I have mentioned: "Being a newbie the instruction should be very simple". In other words, I am good at some stuff but none at scripting.

Is it mine a federal offence ??? ;-)