Почему этот код неправильно устанавливает календарь ui.datepicker.js, когда выбирается дата, установленная в первый раз?

Question

У меня есть форма ввода даты, которая использует три выбора (день / месяц / год)

Следующий скрипт позволяет устанавливать выборки с помощью указателя даты. Кроме того, после того, как вы сделали это один раз, выбор может быть изменен, и это изменение отражается в DatePicker.

Но если сначала установить селекторы, а затем щелкнуть, чтобы открыть средство выбора даты, оно не зафиксирует изменение выбора и выделит правильную дату в устройстве выбора даты. Работает только в том случае, если вы сначала используете средство выбора даты!

Вот 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();
    }

и вот структура единого элемента управления датой

<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

Я на самом деле ОП, но почему-то не вошел, когда я писал:)

Чтобы ответить на вопрос Джеймса, рассматриваемый код изначально был в цикле «каждый», и мне удалось вставить «эксперимент», пытаясь его исправить - я заменил его на этот

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

То же поведение, что и в первоначальном вопросе, так что, к сожалению, моя проблема все еще стоит!

Answer 2

Мне любопытно, что вы используете $ (this):

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

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

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

Что именно вы ожидаете от this в этих заведениях?

Первое находится внутриготов, поэтому я не уверен, что это будет.

Второй и третий в функциях, которые не являются анонимными, поэтому я не уверен, будет ли это ссылаться на объект, который вы хотите.

Может быть, неправильно ...