I have the start date input and a calendar icon, and right next to it is the end date input with its calendar icon. The start date calendar icon triggers the end date input datepicker, but I want the start date calendar icon to trigger the start date input datepicker. Below link is the picture of my result. The red checks trigger the end date input datepicker, and the blue check triggers the start date input datepicker.
<td class="w40">
<span class="date">
<input type="text" class="input_date datepicker">
<span class="icon btn_calendar"></span>
~
<input type="text" class="input_date datepicker">
<span class="icon btn_calendar"></span>
</span>
</td>
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$.datepicker.setDefaults({
dateFormat: 'yy년 mm월 dd일',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
showMonthAfterYear: true,
yearSuffix: '년'
});
$(".btn_calendar").click(function() {
$(".datepicker").datepicker("show");
});
I think you have to use id to identify exactly which button to trigger which input, and bind click event for each button.