Question

我需要使用datepicker输入创建2个或更多表行。它们都有相同的类名。当我选择“开始日期”时结束日期不得大于开始日期。如果只有一行示例有效，但对于具有相同类的多行，它不起作用。请帮忙。

HTML：

<table class="list">
<thead>
    <tr>
        <td>Title</td>
        <td>Start Date</td>
        <td>End Date</td>
        <td></td>
    </tr>
</thead>                
<tbody>                 
    <tr>
        <td><input type="text"  value="new 1" size="2"></td>
        <td><input type="text"  class="startdate" ></td>
        <td><input type="text"  class="enddate" ></td>
    </tr>
    <tr>
        <td><input type="text"  value="new 2" size="2"></td>
        <td><input type="text"  class="startdate"></td>
        <td><input type="text"  class="enddate"></td>
    </tr>
</tbody>

JS：

$( ".startdate").datepicker({ 
        dateFormat:'dd/mm/yy',
        minDate: new Date(),
        onSelect: function(dateStr) {
            $('.enddate').datepicker('option', 'defaultDate', dateStr);
            $('.enddate').datepicker('option', 'minDate', dateStr);
        }

});     
$( ".enddate" ).datepicker({ 
        dateFormat:'dd/mm/yy',
        minDate: new Date()
});

以下是JSFiddle示例。

Answer 1

由于您使用了endDate的类，它会影响具有相同类的所有元素。

使用以下方法，您可以使其代表endDate该特定行;因此，它不会影响表格中的其他endDate。

$(".startdate").datepicker({
    dateFormat: 'dd/mm/yy',
    minDate: new Date(),
    onSelect: function (dateStr, ops) {
        var endDate = $(this).parents('tr').find('.enddate');
        $(endDate).datepicker('option', 'defaultDate', dateStr);
        $(endDate).datepicker('option', 'minDate', dateStr);
    }
});

JSFiddle

当您从startDate选择日期时，以下内容将获得该特定endDate的{{1}}元素。

tr

从而为上述变量设置minDate，您的问题就会得到解决。

多个datepicker，表中包含相同的类

1 个答案: