Question

我有两个输入，startdate和enddate，我正在使用jQuery UI的datepicker。

我有两个问题：

（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属性来保存绑定到每个对象的信息，但是您可以管理您认为合适的属性（包括使用您想要的首选项单独调用每个元素上的.datepicker）。

随着说：

<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（或者我可以告诉）。

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

1 个答案: