2010-01-06 2 views
0

세 개의 선택 (일/월/년)을 사용하는 날짜 입력 양식이 있습니다.날짜 선택을 처음 설정할 때이 코드가 ui.datepicker.js 달력을 올바르게 설정하지 않는 이유는 무엇입니까?

다음 스크립트는 datepicker를 사용하여 선택 항목을 설정할 수 있도록합니다. 또한이 작업을 한 번 수행하면 선택 항목을 변경하고 변경 사항을 datepicker에 반영 할 수 있습니다.

하지만 선택 항목을 먼저 설정 한 다음 클릭하여 datepicker를 열면 변경 사항을 선택하지 않고 datepicker에서 올바른 날짜를 강조 표시합니다. 너가 datepicker을 첫째로 사용하면 그것은 단지 작동한다!

$(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> 

답변

0

하나의 날짜 제어의 구조입니다 :

여기에 jQuery의

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

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

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

this은 정확히이 인스 타 레이 스에있을 것으로 예상됩니까?

첫 번째는 준비가되어 있으므로 무엇이 될지 잘 모르겠습니다.

두 번째 및 thrid는 익명이 아닌 함수에 있으므로이 개체가 원하는 개체를 참조하는지 여부는 확실하지 않습니다.

하지만 잘못 될 수 ...

0

내가 실제로 OP 해요하지만 난 게시 할 때 :

제임스의 질문에 대답하기 위해 어떻게 든 로그인되지 않은 문제의 코드는 실제로이었다 '각'루프로 시작하고 나는 그것을 해결하기 위해 노력의 '실험'을 붙여 관리 - 나는 원래의 질문에 명시된 바와 같이 나는이

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

같은 행동 때문에 슬프게도 내 문제를 교체했습니다 아직도 서있다!

관련 문제