Why does this code not set the ui.datepicker.js calendar correctly when the date selects are set the first time?

Question

I have a date input form which uses three selects (day/month/year)

The following script allows the selects to be set using datepicker. Additionally once you have done this once, the selects can be changed and the change is reflected in datepicker.

But if you set the selects first then click to open datepicker it doesn't pick up the change to the selects and highlight the correct date in datepicker. It only works if you use the datepicker first!

Here's the JQuery:

$(document).ready(function() {

        $('.installDatePicker').append('<img src="assets/images/ico-calendar.png" width="20" height="22" alt="Pick date" /><div class="cal"/>')

        $('.installDatePicker').each(function(i){
            $(this).find('.cal').datepicker({
                beforeShow: readSelected,
                onSelect: updateSelected,   
                minDate: new Date(2010, 1 - 1, 1), 
                maxDate: new Date(2012, 12 - 1, 31),    
            }).hide();  
        })

        $(this).find('img').click(function(){
            $(this).parent().find('.cal').datepicker({
                beforeShow: readSelected
            }).show()
        })  
    });

    // Get values of select boxes and send to datepicker 
    function readSelected() { 
        return {
            setDate: $(this).parent().val(
                $(this).find('select:eq(1)').val() + '/' +  
                $(this).find('select:eq(0)').val() + '/' + 
                $(this).find('select:eq(2)').val())
            }               
    }  

    // Set values of select boxes from datepicker
    function updateSelected(date) {  
        $(this).parent().find('select:eq(1)').val(date.substring(0, 2));  
        $(this).parent().find('select:eq(0)').val(date.substring(3, 5));  
        $(this).parent().find('select:eq(2)').val(date.substring(6, 10));
        $(this).hide();
    }

and here's the structure of a single date control

<fieldset id="firstChoiceDate" class="installDatePicker">
    <select>
        <option value="01">1</option>
        <option value="02">2</option> 
        <option value="03">3</option>
        <option value="04">4</option> 
        <option value="05">5</option>
        <option value="06">6</option> 
        <option value="07">7</option>
        <option value="08">8</option> 
        <option value="09">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">27</option>
        <option value="28">28</option> 
        <option value="29">29</option>
        <option value="30">30</option> 
        <option value="31">31</option>
    </select>

    <select>
        <option value="01">Jan</option>
        <option value="02">Feb</option> 
        <option value="03">Mar</option>
        <option value="04">Apr</option> 
        <option value="05">May</option>
        <option value="06">Jun</option> 
        <option value="07">Jul</option>
        <option value="08">Aug</option> 
        <option value="09">Sep</option>
        <option value="10">Oct</option> 
        <option value="11">Nov</option>
        <option value="12">Dec</option>
    </select>  

    <select>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
    </select>
</fieldset>

Answer 1

I'm curious by your use of $(this):

$(this).find('img').click(function(){ 

setDate: $(this).parent().val(

$(this).parent().find('select.....

What exactly are you expecting this to be in these instaces?

The first is within the ready, so I'm not sure what it will be.

The second and thrid are in functions that are not anonymous, so I'm not sure whether this will reference the object you want.

Could be wrong though...

Answer 2

I'm actually the OP but somehow wasn't logged in when I posted :)

To answer James question, the code in question was actually in the 'each' loop to begin with and I managed to paste an 'experiment' in trying to fix it - I've replaced it with this

$('.installDatePicker img').click(function(){
        $(this).parent().find('.cal').datepicker({
            beforeShow: readSelected
        }).show()
})

Same behaviour as I stated in the original question, so sadly my problem still stands!