вызов JQuery UI datepicker с помощью функции

Question

Как назвать функцию datepicker с помощью функции. когда я нажимаю на изображение календаря, датапикер покажет с 2 мес.

<tr><td>date</td><td> 
      <input type='text' readonly name="SDATE" id='SDATE' ><img src="calendar.gif" border='0' id='dat_img' onclick="return showCalendar('SDATE')" > 
     </td></tr><tr><td>date</td><td> 
      <input type='text' readonly name="SDATE1" id='SDATE1' ><img src="calendar.gif" border='0' id='dat_img' onclick="return showCalendar('SDATE1')" > 
     </td></tr><tr><td>date</td><td> 
      <input type='text' readonly name="SDATE2" id='SDATE3' ><img src="calendar.gif" border='0' id='dat_img' onclick="return showCalendar('SDATE3')" > 
     </td></tr> 

    <script> 
    function showCalendar(inputId){ 
     //alert(inputId); 
     for(i=0;i<=inputId.length;$i++){ 
      $("#"+inputId).datepicker({ 
       numberOfMonths: 2, 
       dayNamesMin: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'], 
       changeYear:true, 
       changeMonth: true, 
       autoSize: true 
      }); 
     } 
    } 
    </script> 

Эта функция не работает.

Answer 1

Используйте общий класс хорош вместо различных id, как,

$(function(){ 
    $('.mydatepicker').datepicker({ 
     numberOfMonths: 2, 
     dayNamesMin: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'], 
     changeYear:true, 
     changeMonth: true, 
     autoSize: true 
    }); 
}); 

Затем ваш HTML должен выглядеть,

<tr> 
    <td>date</td> 
    <td> 
     <input type='text' class="mydatepicker" readonly name="SDATE" id='SDATE' /> 
     <img src="calendar.gif" border='0' id='dat_img' /> 
    </td> 
</tr> 
<tr> 
    <td>date</td> 
    <td> 
     <input type='text' class="mydatepicker" readonly name="SDATE1" id='SDATE1' /> 
     <img src="calendar.gif" border='0' id='dat_img' /> 
    </td> 
</tr> 
<tr> 
    <td>date</td> 
    <td> 
     <input type='text' class="mydatepicker" readonly name="SDATE2" id='SDATE3' /> 
     <img src="calendar.gif" border='0' id='dat_img' /> 
    </td> 
</tr> 

использовать #date-range вы можете использовать класс в тр -row, как

$(".from-date").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 3, 
    onClose: function (selectedDate) { 
     $(this).closest('tr').find('.to-date').datepicker("option", "minDate", selectedDate); 
    } 
}); 
$(".to-date").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 3, 
    onClose: function (selectedDate) { 
     $(this).closest('tr').find('.from-date').datepicker("option", "maxDate", selectedDate); 
    } 
}); 

Date-range Demo

Answer 2

Скорее сообщите элементам управления, что они выбрали дату при загрузке страницы (при готовности документа). Сначала вам нужно будет выбрать все элементы управления, которые вы хотите выбрать для выбора даты. Таким образом, мы будем выбирать все элементы управления, чье имя начинается с «SDATE»:

$(document).ready(function() 
{ 
    $("input[name^='SDATE']").datepicker({ 
     numberOfMonths: 2, 
     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
     changeYear: true, 
     changeMonth: true, 
     autoSize: true 
    }); 
}); 

В качестве альтернативы вы можете попробовать add.show() в конце:

function showCalendar(inputId){ 
    //alert(inputId); 
    for(i=0;i<=inputId.length;$i++){ 
     $("#"+inputId).datepicker({ 
      numberOfMonths: 2, 
      dayNamesMin: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'], 
      changeYear:true, 
      changeMonth: true, 
      autoSize: true 
     }).show();/*Note the change here*/ 
    } 
}