通过函数调用 JQuery UI datepicker

Question

如何使用函数调用日期选择器。当我单击日历图像时，日期选择器将显示 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

当页面加载时（在文档准备好时）告诉控件它们是日期选择器。 首先，您需要选择所有想要作为日期选择器的控件。所以我们将选择所有名称以“SDATE”开头的控件：

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

您也可以尝试在末尾添加.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*/
    }
}

Answer 2

使用一个共同的类好，而不是不同的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，您可以在 tr-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