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

时间:2013-08-06 10:37:44

标签: jquery jquery-ui datepicker

<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 ui datepicker和jquery 1.10.1来选择日期。我希望在选择#last日期时将(#apply).val的日期范围从#apply + 7天添加到+ 4D并启用它。怎么做?

如果我删除onselect function我的日期选择工具。否则它没有。

1 个答案:

答案 0 :(得分:2)

Working JS FIDDLE

您需要将selectedDate传递给事件处理程序,然后将其转换为日期对象,然后添加4天和7天。

另外,最好使用专门为datepicker构建的自定义事件处理程序来处理它的事件,onClose而不是你必须为其构建代码的默认事件。

这是来自小提琴的代码:

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

});