"updating the values of the pulldown menu ounce the user have choosen
a date from the Jquery datepicker"
Something like this should work
in the datepicker include
onSelect: updateLinked
then (change as needed for your pull down ids)
// Update three select controls to match a date picker selection
// But need to get rid of leading zero on day and month first
function updateLinked(t_date) {
var s_mo = t_date.substring(0, 1);
if (s_mo == '0') {
$('#month').val(t_date.substring(1, 2));
}
else {
$('#month').val(t_date.substring(0, 2));
}
var s_day = t_date.substring(3,4);
if (s_day == '0') {
$('#day').val(t_date.substring(4, 5));
}
else {
$('#day').val(t_date.substring(3, 5));
}
$('#year').val(t_date.substring(6, 10));
}
On Sep 18, 3:21 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 and a pulldown menu of
> month and day. The pulldown menu Is the element I want to retain, 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
> very 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!
