Как всегда показывать два указателя даты и устанавливать дату по умолчанию на входе

Question

У меня есть два входа, startdate и enddate, и я использую указатель даты из пользовательского интерфейса jQuery.

У меня два вопроса:

(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')
        });
    });
});

Приведенный выше код приводит к желаемому результату (или так я могу сказать).