通过函数调用JQuery UI datepicker

Question

How to call datepicker using function. when i click on the calendar image the datepicker will show with 2months.

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

this function is not working.

Answer 1

Use a common class is good instead of different id like,

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

Then, your HTML should look like,

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

To Use #date-range you can use class in a tr-row like

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

Rather tell the controls that they are date pickers when the page loads (on document ready). First you will need to select all the controls that you want as date pickers. So we will select all controls who's name starts with 'SDATE':

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

Alternatively you can try to add.show() at the end:

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*/
    }
}