Question

I have two inputs, startdate and enddate, and I am using datepicker of jQuery UI.

I have two questions:

(1) How to make the datepickers always show, instead of showing upon clicking the inputs? The current code only show enddate‘s datepicker, and it will hide when I click the other input.

(2) How to set default date for each, and display the date in the input? The current code doesn’t work.

=== 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

Based on some tinkering, here’s what I’ve come up with. Granted, i use data attributes to keep the information bound to each object, but you can manage the properties however you see fit (including calling .datepicker on each element individually with the preferences you want).

With that said:

<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 above code results in the desired result (or so i can tell).