 |
CalendarXP.net Support
Most forums here are private and invisible to public.
|
| View previous topic :: View next topic |
| Author |
Message |
tomharrow
Joined: 11 Oct 2005
Posts: 5
|
 Posted: Wed Oct 12, 2005 11:15 am Post subject: populate seperate day, month, year dropdown lists from calendar |
 |
|
Hi I want to be able to populate a DAY MONTH and YEAR dropdown list from the popup calendar. I have tried to use the code from the demos on the site but am struggling to get them to work. hads anyone managed to find a simple solution that works?
thanks
tom
|
|
| Back to top |
|
 |
calendarxp
Site Admin
Joined: 30 Jan 2005
Posts: 409
|
| Posted: Wed Oct 12, 2005 12:29 pm Post subject: |
|
|
Which part of it doesn't work? Could you please post the HTML code you were using here?
Also, did you set up the hidden field to take the date? - as stated in the demo : "You need a hidden input field to store the selected date, and use the name of it as a prefix to name the 3 dropdowns so that the plugins can find them."
e.g. the name of the actual arrival date input is "arrDate", therefore all 3 associated dropdowns are names as "arrDate_day", "arrDate_mon" and "arrDate_year".
_________________
Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved. |
|
| Back to top |
|
|
tomharrow
Joined: 11 Oct 2005
Posts: 5
|
| Posted: Wed Oct 12, 2005 3:39 pm Post subject: |
|
|
Hi Thanks for your reply.
This is the code i am using:
| Code: |
<input type="hidden" name="ADT" />
<tr>
<td nowrap="nowrap"><select class="dropBox" name="ADT_depDay" width="2">
<%for i = 1 to 31%>
<option value="<%=i%>" <%if i = futureDayDep then%>selected<%end if%>><%=i%></option>
<%next%>
</select>
<select name="ADT_depMonth" class="dropBox">
<%for i = 1 to 12%>
<option value="<%=i%>" <%if i = futureMonthDep then%>selected<%end if%>><%=MonthName(i,1)%></option>
<%next%>
</select>
<select name="ADT_depYear" class="dropBox">
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
<input name="dc1" type="hidden" value="08/06/2001" alt="hiddenDate">
<a href="javascript:void(0)" onclick="if(this.blur)this.blur();var fm=this.form;if(self.gfPop)gfPop.fPopCalendar(fm.ADT_depDay,fm.ADT_depMonth,fm.ADT_depYear,fm.dc1,fm.dc2)" tabindex="3"><img name="popcal" id="popcal" src="/images/hp2005/icon_calendar.gif" width="21" height="18" class="sta_fsIcon" border="0" alt="Calendar" /></a>
</td>
</tr>
|
The iFrame I am using is:
| Code: |
<!-- Popup Calendar -->
<iframe name="gToday:mac:hp_fli.js" id="gToday:mac:hp_fli.js"
src="/scripts/calendar/ipopeng.htm" scrolling="no" frameborder="0"
style="visibility:visible; z-index:999; position:absolute; left:-500px; top:0px;">
<layer name="gToday:mac:hp_fli.js" src="/scripts/calendar/npopeng.htm"></layer>
</iframe>
<!-- End popup calendar -->
|
I have set up the hidden field to take the date.
|
|
| Back to top |
|
|
calendarxp
Site Admin
Joined: 30 Jan 2005
Posts: 409
|
| Posted: Wed Oct 12, 2005 7:37 pm Post subject: |
|
|
Please try using the following code to replace the 1st portion you pasted:
| Code: |
<tr>
<td nowrap="nowrap"><select class="dropBox" name="ADTdep_day" width="2">
<option value="">-date-</option>
<%for i = 1 to 31%>
<option value="<%=i%>" <%if i = futureDayDep then%>selected<%end if%>><%=i%></option>
<%next%>
</select>
<select name="ADTdep_mon" class="dropBox">
<option value="">-month-</option>
<%for i = 1 to 12%>
<option value="<%=i%>" <%if i = futureMonthDep then%>selected<%end if%>><%=MonthName(i,1)%></option>
<%next%>
</select>
<select name="ADTdep_year" class="dropBox">
<option value="">-year-</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
<input type="hidden" name="ADTdep" />
<a href="javascript:void(0)" onclick="if(this.blur)this.blur();var fm=this.form;if(self.gfPop)gfPop.fPopCalendar(fm.ADTdep,null,null,fm.ADTdep_year);" tabindex="3"><img name="popcal" id="popcal" src="/images/hp2005/icon_calendar.gif" width="21" height="18" class="sta_fsIcon" border="0" alt="Calendar" /></a>
</td></tr> |
If you take a look at the plugins.js of the classic demo - which I assume you are using - you will understand why we need to name the inputs like that: (following code is excerpted from the plugins.js)
| Code: | function fAfterSelected(y,m,d,e) {
var prefix=gdCtrl.name;
var formRef=gdCtrl.form;
formRef.elements[prefix+"_day"].options.selectedIndex=d;
formRef.elements[prefix+"_mon"].options.selectedIndex=m;
var _yc=formRef.elements[prefix+"_year"];
_yc.options.selectedIndex=y-_yc.options[1].value+1;
}
function updateHidden(dc) {
var prefix=dc.name.split("_")[0];
var els=dc.form.elements;
els[prefix].value=fFormatInput(els[prefix+"_year"].options[els[prefix+"_year"].selectedIndex].value,els[prefix+"_mon"].options[els[prefix+"_mon"].selectedIndex].value,els[prefix+"_day"].options[els[prefix+"_day"].selectedIndex].value);
} |
_________________
Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved. |
|
| Back to top |
|
|
tomharrow
Joined: 11 Oct 2005
Posts: 5
|
| Posted: Thu Oct 13, 2005 3:27 pm Post subject: |
|
|
I still cannot seem to get it to work.
I am now using plugins.js
| Code: | | <script language="javascript" type="text/javascript" src="/scripts/calendar/plugins.js"></script> |
Is there anything I need to do to this section of the code?
| Code: | <!-- Popup Calendar -->
<iframe name="gToday:mac:hp_fli.js" id="gToday:mac:hp_fli.js"
src="/scripts/calendar/ipopeng.htm" scrolling="no" frameborder="0"
style="visibility:visible; z-index:999; position:absolute; left:-500px; top:0px;">
<layer name="gToday:mac:hp_fli.js" src="/scripts/calendar/npopeng.htm"></layer>
</iframe>
<!-- End popup calendar --> |
It is not even firing the calendar.
Thanks in advance.
Tom
|
|
| Back to top |
|
|
calendarxp
Site Admin
Joined: 30 Jan 2005
Posts: 409
|
| Posted: Fri Oct 14, 2005 1:18 am Post subject: |
|
|
It seems that we have a misunderstanding here - the plugins.js is loaded by the engine automatically, and you don't need to explictly include it in your page.
Therefore, please remove the following from your page, as it's not needed.
| Code: | | <script language="javascript" type="text/javascript" src="/scripts/calendar/plugins.js"></script> |
Next I still would like you to make sure that the plugins.js file has the correct function in it - please use the plugins.js from the demos/classic/ directory and put it in /scripts/calendar/ on your server. You don't need to change the <iframe> code in your page, it's fine.
After you place the right plugins.js file, you just need the following code in your page and it should work:
| Code: | <tr>
<td nowrap="nowrap"><select class="dropBox" name="ADTdep_day" width="2">
<option value="">-date-</option>
<%for i = 1 to 31%>
<option value="<%=i%>" <%if i = futureDayDep then%>selected<%end if%>><%=i%></option>
<%next%>
</select>
<select name="ADTdep_mon" class="dropBox">
<option value="">-month-</option>
<%for i = 1 to 12%>
<option value="<%=i%>" <%if i = futureMonthDep then%>selected<%end if%>><%=MonthName(i,1)%></option>
<%next%>
</select>
<select name="ADTdep_year" class="dropBox">
<option value="">-year-</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
<input type="hidden" name="ADTdep" />
<a href="javascript:void(0)" onclick="if(this.blur)this.blur();var fm=this.form;if(self.gfPop)gfPop.fPopCalendar(fm.ADTdep,null,null,fm.ADTdep_year);" tabindex="3"><img name="popcal" id="popcal" src="/images/hp2005/icon_calendar.gif" width="21" height="18" class="sta_fsIcon" border="0" alt="Calendar" /></a>
</td></tr>
...
<!-- Popup Calendar -->
<iframe name="gToday:mac:hp_fli.js" id="gToday:mac:hp_fli.js"
src="/scripts/calendar/ipopeng.htm" scrolling="no" frameborder="0"
style="visibility:visible; z-index:999; position:absolute; left:-500px; top:0px;">
<layer name="gToday:mac:hp_fli.js" src="/scripts/calendar/npopeng.htm"></layer>
</iframe>
<!-- End popup calendar --> |
If you are still having trouble, please send us a test link or package all your code in a zip file and attach it in private message. We'll help you to create one.
_________________
Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved. |
|
| Back to top |
|
|
tomharrow
Joined: 11 Oct 2005
Posts: 5
|
|
| Back to top |
|
|
calendarxp
Site Admin
Joined: 30 Jan 2005
Posts: 409
|
| Posted: Mon Oct 17, 2005 8:16 pm Post subject: |
|
|
OK, thanks for the link - it makes thing more clear.
1st, you need to add the following code to the top of your hp_fli.js file (since it's the renamed plugins.js in your case - check with your iframe id).
| Code: | function fAfterSelected(y,m,d,e) {
var prefix=gdCtrl.name;
var formRef=gdCtrl.form;
formRef.elements[prefix+"_day"].options.selectedIndex=d;
formRef.elements[prefix+"_mon"].options.selectedIndex=m;
var _yc=formRef.elements[prefix+"_year"];
_yc.options.selectedIndex=y-_yc.options[1].value+1;
}
function updateHidden(dc) {
var prefix=dc.name.split("_")[0];
var els=dc.form.elements;
els[prefix].value=fFormatInput(els[prefix+"_year"].options[els[prefix+"_year"].selectedIndex].value,els[prefix+"_mon"].options[els[prefix+"_mon"].selectedIndex].value,els[prefix+"_day"].options[els[prefix+"_day"].selectedIndex].value);
} |
2nd, you need to locate the <A> link of your calendar icon and change it from: | Code: | | <a href="javascript:void(0)" onclick="if(this.blur)this.blur();var fm=this.form;if(self.gfPop)gfPop.fPopCalendar(fm.ADTdep,null,null,fm.ADTdep_year);" tabindex="3"> |
to
| Code: | | <a href="javascript:void(0)" onclick="if(this.blur)this.blur();var fm=document.frm_flightSearch;if(self.gfPop)gfPop.fPopCalendar(fm.ADTdep,null,null,fm.ADTdep_year);" tabindex="3"> |
This is because the code "this.form" only works on html button, as it is a form element, but does not work for a link.
After these changes, the calendar will update the dropdowns whenever you pick a date.
Then the final step is to make the dropdowns update the hidden field whenever user is clicking on them instead of calendar. To do so, simply append the updateHidden() to the onchange event of all these dropdowns. e.g.
| Code: | <select class="dropBox" name="ADTdep_day" width="2" onchange="if(self.gfPop)gfPop.updateHidden(this)">
<select name="ADTdep_mon" class="dropBox" onchange="if(self.gfPop)gfPop.updateHidden(this)">
<select name="ADTdep_year" class="dropBox" onchange="if(self.gfPop)gfPop.updateHidden(this)"> |
_________________
Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved.
Last edited by calendarxp on Tue Jan 17, 2006 1:19 pm; edited 1 time in total |
|
| Back to top |
|
|
calendarxp
Site Admin
Joined: 30 Jan 2005
Posts: 409
|
| Posted: Mon Oct 17, 2005 8:25 pm Post subject: |
|
|
One more correction to your page - since you renamed the standard "plugins.js" to "hp_fli.js", you should explictly declare the new name in the name & id of the calendar iframe tag. However, the one on your page has it in a wrong place:
| Code: | <iframe name="gToday:mac:hp_fli.js" id="gToday:mac:hp_fli.js"
src="scripts/calendar/ipopeng.htm" scrolling="no" frameborder="0"
style="visibility:visible; z-index:999; position:absolute; left:-500px; top:0px;">
<layer name="gToday:mac:hp_fli.js" src="scripts/calendar/npopeng.htm"></layer>
</iframe> |
It should be corrected to the following instead - the name of plugins should be located at the 5th parameter not the 3rd one!
| Code: | <iframe name="gToday:mac:::hp_fli.js" id="gToday:mac:::hp_fli.js"
src="scripts/calendar/ipopeng.htm" scrolling="no" frameborder="0"
style="visibility:visible; z-index:999; position:absolute; left:-500px; top:0px;">
<layer name="gToday:mac:::hp_fli.js" src="scripts/calendar/npopeng.htm"></layer>
</iframe> |
_________________
Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved. |
|
| Back to top |
|
|
tomharrow
Joined: 11 Oct 2005
Posts: 5
|
| Posted: Tue Oct 18, 2005 2:59 pm Post subject: |
|
|
It works!
I have just picked this job up form a deveoper away on holiday - the renaming of plugin.js to hp_fli really threw me.
So yes, thnks again, t is working sweetly.
Kind Regards,
Tom
|
|
| Back to top |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum
|
Copyright 2003- Idemfactor Solutions, Inc. All rights reserved.
Powered by phpBB © 2001, 2005 phpBB Group
|
FAQ
Search
Register
Profile
Log in to check your private messages
Log in
