jquery - 如何始终显示两个日期选择器并在输入中设置默认日期

Question

我有两个输入，startdate 和 enddate，并且我正在使用 jQuery UI 的日期选择器。

我有两个问题:

(1) 如何使日期选择器始终显示，而不是单击输入时显示？当前代码仅显示 enddate 的日期选择器，当我单击其他输入时它将隐藏。

(2) 如何为每个设置默认日期，并在输入中显示日期？当前代码不起作用。

=== HTML ===
<input type="text" id="startdate">
<label for="startdate">Start date</label>
<input type="text" id="enddate">
<label for="enddate">End date</label>

==== JS ====
$('#startdate, #enddate').datepicker({
    maxDate: 0
});    
$('#startdate').datepicker({
    defaultDate: -30
});
$('#enddate').datepicker({
    defaultDate: 0
});
$('#startdate').datepicker('show');
$('#enddate').datepicker('show');

Answer 1

基于一些修补，这就是我想出的。当然，我使用 data 属性来将信息绑定(bind)到每个对象，但是您可以按照您认为合适的方式管理属性(包括使用您想要的偏好)。

话虽如此:

<table>
    <tr>
        <td><input type="text" name="startdate" id="startdate" /></td>
        <td><input type="text" name="enddate" id="enddate" /></td>
    </tr>
    <tr>
        <td><div class="date" data-altfield="#startdate" data-defaultdate="-30d"></div></td>
        <td><div class="date" data-altfield="#enddate" data-defaultdate="+0d"></div></td>
    </tr>
</table>

$(function(){
    $('.date').each(function(i,e){
        var $d = $(this);
        $d.datepicker({
            altField: $d.data('altfield'),
            defaultDate: $d.data('defaultdate')
        });
    });
});

上面的代码结果为 the desired result (或者我可以这么说)。