jquery - 根据另一个字段的输入设置一个字段的日期范围 jquery datepicker

Question

<table class='dates'>
    <form method='post' action=''>
        <tr><td>Start Date of Apply</td><td>: <input type="text" id="apply" name='start' placeholder='DD/MM/YYYY' readonly="true"/></td></tr>
        <tr><td>Last Date of Apply</td><td>: <input type="text" id="last" name='last' placeholder='DD/MM/YYYY' readonly="true" disabled='true'/></td></tr>
        </td><td align='right'><input type='submit' name='cancel' value='Cancel'/></td></tr>
    </form>
    </table>

这是我的 html 代码。到目前为止，我的 jquery 代码是这样的。

$(function() {
    $('#apply').datepicker({ showOtherMonths: true, selectOtherMonths: true, minDate: 0, maxDate: "2m"});
    $('#apply').onSelect({
        $('#last').prop('disabled', false),
        $('#last').datepicker({ minDate: $('#apply').val()+7D, maxDate: "+4D"})
    });

});

我正在使用带有 jquery 1.10.1 的 jquery ui datepicker 来选择日期。我想在选择日期时将日期范围#last从(#apply).val+7days 到 +4D#apply并启用它。怎么做？

如果我删除onselect function我的日期选择器作品。否则它不会。

Answer 1

Working JS FIDDLE

you need to pass in selectedDate to your event handler, and then convert it to a date object, and then add the 4 days and the seven days.

also, your better off using the custom event handlers built specifically for the datepicker to handle events for it, onClose rather than a default one you'll have to build out code for.

here is the code from the fiddle:

$('#apply').datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    minDate: 0,
    maxDate: "2m",
    onSelect: function(selectedDate){
        console.log(selectedDate);
       $('#last').prop('disabled', false);
       $('#last').datepicker({
         minDate: (function(){                 
            var min = new Date(selectedDate); 
            var newmin = new Date();
             newmin.setDate(min.getDate()+4);
            return newmin;
         })(),
         maxDate:(function(){
            var min = new Date(selectedDate);
            var newmin = new Date();
            newmin.setDate(min.getDate()+7);
            return newmin;
         })()
    });
    }

});