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 <[email protected]> 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 <[email protected]> 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 > > a pop window type of calender (I kinda hate it, and in my opinion it > > looks ugly) now I want it to be replaced with the JQuery UI > > Datepicker. > > > How can that be implemented? I think my main problem is updating the > > values of the pulldown menu ounce the user have choosen a date from > > the Jquery datepicker. > > > Thanks You! --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
