세 개의 선택 (일/월/년)을 사용하는 날짜 입력 양식이 있습니다.날짜 선택을 처음 설정할 때이 코드가 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>