2012-01-11 3 views
0

jQuery UI datepicker를 구현하여 입력 텍스트 상자 대신 일련의 선택 상자를 사용하려고합니다. 그 이유는 선택 상자가 자동으로 생성되고 그 코드를 변경할 수 없기 때문에 텍스트 상자를 입력하기 위해 변경할 수 없기 때문입니다.jQuery datepicker 선택 상자 사용

이것은 일반적인 데이트 피커이므로이 기능을 사용할 수 있습니다.

enter image description here

그러나, 우리를 위해, 우리는이 작업을 할 필요가 :

여기 enter image description here

이에 대한 HTML이다 :

<div class="DetailRow"> 
    <div class="Label"> 
     <span class="Required">*</span>Tour Begin Date: 
    </div> 
    <div class="Value"> 
     <select id="EventDateMonth" name="EventDate[Mth]" class="CalendarSelectSmall" style="margin-bottom:3px; "> 
      <option value="-1">---</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option> 
     </select> 
     <select id="EventDateDay" name="EventDate[Day]" class="CalendarSelectSmall" style="margin-bottom:3px; "> 
      <option value="-1">---</option><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">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option> 
     </select> 
     <select id="EventDateYear" name="EventDate[Yr]" class="CalendarSelectSmall" style="margin-bottom:3px; "> 
      <option value="-1">---</option><option value="2012">2012</option> 
     </select> 
     <div> 
      (Must be before 31st Dec 2012) 
     </div> 
    </div> 
</div> 

어떤 도움이 크게 될 것입니다 고맙다!

답변

0

아마도 jQuery datepicker 아이콘 트리거와 함께 숨겨진 입력 상자에 첨부 된 datepicker를 호출 할 수 있습니다. 캘린더를 클릭하면 숨겨진 텍스트 상자에 삽입 된 값을 적절한 드롭 다운으로 바꿔야합니다.

jQuery icon trigger example