Here is code for the departure fields. You will need to apply similar code to your arrival fields and keep your code that deals with the days of a given month. You should also add some code to set the datepicker date when a users uses the dropdowns to set a date.
http://jsbin.com/evovu/edit Hth, Dave On Sep 19, 3:40 pm, pennfoli0 <pennfo...@gmail.com> wrote: > Thank You Dave for continually answering my questions. Yeah I had that > in mind and I also would like that approach since it's clean. But my > concern is my affiliate I think responds to specific forms. > > Here's the actual snippet from my affiliate site. > > http://pastebin.com/m7350e8af > > And here's what I've tweaked > > http://pastebin.com/m10303667 > > Instead of using radio buttons, I used the jquery tab to have better > look. Now > I'm stuck on cleaning the date forms and replacing them to the jquery > date picker, how would I replace those date > forms if your in my shoes?. > > Thank You! I greatly appreciate your help. > > On Sep 18, 10:51 pm, Fontzter <dmfo...@gmail.com> wrote: > > > How about something like this:http://jsbin.com/exijo/edit > > > Dave > > > On Sep 18, 9:47 am, pennfoli0 <pennfo...@gmail.com> wrote: > > > > Thanks Dave, > > > > The code that i'm planning to add my JQuery datepicker is a code > > > snippet from my booking engine affiliate. > > > (e.g.http://www.zajeltravel.com). > > > > The days of month or leap year is being handled by the original > > > snippet code, I just want to replace the old datepicker with the > > > JQuery version of datepicker. can that be possible? > > > > Btw. I'm using that approach since I think that would be the easiest > > > way, But if you think I would have to redo the form to have better and > > > optimized approach just let me know. > > > > Thanks! > > > > On Sep 18, 8:51 pm, Fontzter <dmfo...@gmail.com> wrote: > > > > > I'm not sure I understand your question. If you simply want to have a > > > > datepicker on your page triggered by an icon > > > > see:http://jqueryui.com/demos/datepicker/#icon-trigger > > > > > It's really as simple as this (set the path to your own icon): > > > > > $("#datepicker").datepicker({showOn: 'button', buttonImage: 'images/ > > > > calendar.gif', buttonImageOnly: true}); > > > > > Hth, > > > > > Dave > > > > > P.S. There is a lot of code logic to apply if you plan to use drop- > > > > downs for month and day (days of month, leap year, etc.) > > > > > On Sep 18, 4:35 am, pennfoli0 <pennfo...@gmail.com> wrote: > > > > > > Hi, > > > > > > I need help adding the jquery date picker to my existing code, but not > > > > > reconstructing the whole HTML file. > > > > > > my code, > > > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > > > > <html xmlns="http://www.w3.org/1999/xhtml";> > > > > > <head> > > > > > <meta http-equiv="Content-Type" content="text/html; > > > > > charset=utf-8" /> > > > > > <title>calenar</title> > > > > > > <script > > > > > src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ > > > > > jquery.min.js" type="text/javascript" charset="utf-8"></script> > > > > > <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/ > > > > > 1.7.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></ > > > > > script> > > > > > > <script type="text/javascript"> > > > > > $(function(){ > > > > > > // #datepickers > > > > > $("#datepicker").datepicker({showOn: 'button', > > > > > buttonImage: 'images/calendar.gif', buttonImageOnly: true}); > > > > > > }); > > > > > </script> > > > > > > </head> > > > > > > <body> > > > > > <p>Depart:</p> > > > > > <table cellpadding="2" cellspacing="0" border="0"> > > > > > <tr> > > > > > <td><select name="departureMonth" > > > > > onchange="javascript:dmddChange > > > > > (document.hotForm.departureMonth,document.hotForm.departureDay);"> > > > > > <option value="0">January</option> > > > > > <option value="1">February</option> > > > > > <option value="2">March</option> > > > > > <option value="3">April</option> > > > > > <option value="4">May</option> > > > > > <option value="5">June</option> > > > > > <option value="6">July</option> > > > > > <option value="7">August</option> > > > > > <option value="8">September</option> > > > > > <option value="9">October</option> > > > > > <option value="10">November</option> > > > > > <option value="11">December</option> > > > > > </select></td> > > > > > <td><select name="departureDay" onchange="dmddChange > > > > > (document.hotForm.departureMonth,document.hotForm.departureDay)"> > > > > > <option value="1">1</option> > > > > > <option value="2">2</option> > > > > > <option value="3">3</option> > > > > > <option value="4">4</option> > > > > > <option value="5">5</option> > > > > > <option value="6">6</option> > > > > > <option value="7">7</option> > > > > > <option value="8">8</option> > > > > > <option value="9">9</option> > > > > > <option value="10">10</option> > > > > > <option value="11">11</option> > > > > > <option value="12">12</option> > > > > > <option value="13">13</option> > > > > > <option value="14">14</option> > > > > > <option value="15">15</option> > > > > > <option value="16">16</option> > > > > > <option value="17">17</option> > > > > > <option value="18">18</option> > > > > > <option value="19">19</option> > > > > > <option value="20">20</option> > > > > > <option value="21">21</option> > > > > > <option value="22">22</option> > > > > > <option value="23">23</option> > > > > > <option value="24">24</option> > > > > > <option value="25">25</option> > > > > > <option value="26">26</option> > > > > > <option value="27" selected="selected">27</option> > > > > > <option value="28">28</option> > > > > > <option value="29">29</option> > > > > > <option value="30">30</option> > > > > > <option value="31">31</option> > > > > > </select></td> > > > > > <td><a href="javascript:openCalendar('hotForm', > > > > > 'departure');"><img src="http://affiliate.travelnow.com/ > > > > > searchboximages/blueFormCalendar.gif" border="0"/></a></td> > > > > > </tr> > > > > > </table> > > > > > > <p>Going to:</p> > > > > > <table cellpadding="2" cellspacing="0" border="0"> > > > > > <tr> > > > > > <td><select name="departureMonth" > > > > > onchange="javascript:dmddChange > > > > > (document.hotForm.departureMonth,document.hotForm.departureDay);"> > > > > > <option value="0">January</option> > > > > > <option value="1">February</option> > > > > > <option value="2">March</option> > > > > > <option value="3">April</option> > > > > > <option value="4">May</option> > > > > > <option value="5">June</option> > > > > > <option value="6">July</option> > > > > > <option value="7">August</option> > > > > > <option value="8">September</option> > > > > > <option value="9">October</option> > > > > > <option value="10">November</option> > > > > > <option value="11">December</option> > > > > > </select></td> > > > > > <td><select name="departureDay" onchange="dmddChange > > > > > (document.hotForm.departureMonth,document.hotForm.departureDay)"> > > > > > <option value="1">1</option> > > > > > <option value="2">2</option> > > > > > <option value="3">3</option> > > > > > <option value="4">4</option> > > > > > <option value="5">5</option> > > > > > <option value="6">6</option> > > > > > <option value="7">7</option> > > > > > <option value="8">8</option> > > > > > <option value="9">9</option> > > > > > <option value="10">10</option> > > > > > <option value="11">11</option> > > > > > <option value="12">12</option> > > > > > <option value="13">13</option> > > > > > <option value="14">14</option> > > > > > <option value="15">15</option> > > > > > <option value="16">16</option> > > > > > <option value="17">17</option> > > > > > <option value="18">18</option> > > > > > <option value="19">19</option> > > > > > <option value="20">20</option> > > > > > <option value="21">21</option> > > > > > <option value="22">22</option> > > > > > <option value="23">23</option> > > > > > <option value="24">24</option> > > > > > <option value="25">25</option> > > > > > <option value="26">26</option> > > > > > <option value="27" selected="selected">27</option> > > > > > <option value="28">28</option> > > > > > <option value="29">29</option> > > > > > <option value="30">30</option> > > > > > <option value="31">31</option> > > > > > </select></td> > > > > > <td><a href="javascript:openCalendar('hotForm', > > > > > 'departure');"><img src="http://affiliate.travelnow.com/ > > > > > searchboximages/blueFormCalendar.gif" border="0"/></a></td> > > > > > </tr> > > > > > </table> > > > > > > </body> > > > > > </html> > > > > > > working site. > > > > > >http://boxwithsand.0fees.net/test-calendar.html > > > > > > as you can see there is an icon of a calendar near of its pulldown > > > > > menu. the calendar icon is calling for (javascript:openCalendar) it's > > ... > > read more » --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery-ui@googlegroups.com To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
