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
> 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 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
-~----------~----~----~----~------~----~------~--~---
