Jquery通过检查另一个日期来禁用过去几天

时间:2015-04-09 05:22:38

标签: jquery jquery-ui jquery-ui-datepicker

我有两个文本字段(datepicker),如下图所示。

enter image description here

当我从 FROM 字段中选择日期时,日期选择器会出现并选择日期。

之后我想在 TO 文本字段中禁用 FROM 字段的过去日期。

我的代码如下:

$(document).ready(function() {
    var startcheck;
    $( "#datepick" ).datepicker({ 
        dateFormat: 'yy-mm-dd',
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) 
        {
            startcheck = $(this).val();

            $( "#datepickto" ).datepicker({ dateFormat: 'yy-mm-dd',showOtherMonths: true,selectOtherMonths: true,minDate: "'"+startcheck+"'"});
        }
    });

    $( "#datepickto" ).datepicker({ dateFormat: 'yy-mm-dd',showOtherMonths: true,selectOtherMonths: true,minDate: "'"+startcheck+"'"});

});

我该如何解决这个问题?

任何人请帮助我!!!!!!!!!!!

@Barmar:请看看你的回答和我的问题。!!

编辑回答

        function showRestricedDatePicker()
    {
        $("#datepick").datepicker({
            dateFormat: 'yy-mm-dd', 
            maxDate: new Date(), 
            changeMonth: true,
            changeYear: true,
            onClose: setRange 
        });

        $("#datepickto").datepicker({
            dateFormat: 'yy-mm-dd', 
            changeMonth: true,
            changeYear: true,
            beforeShow: setRange
        });
    }
    function setRange()
    {
        currentDate = new Date();
        var fromDate = $('#datepick').datepicker('getDate');
        if(fromDate != null && fromDate != '') {
            return { minDate: fromDate }        
        }
    }

html

 <td><input type="text" name="date" id="datepick" placeholder="From" autocomplete="off" onclick="showRestricedDatePicker()" ></td>
 <td><input type="text" name="dateto" id="datepickto" placeholder="To" autocomplete="off" onclick="showRestricedDatePicker()"></td>

1 个答案:

答案 0 :(得分:1)

调用showRestricedDatePicker,点击你的日期选择器输入框

function showRestricedDatePicker()
{
    $("#fromDate").datepicker({
        dateFormat: 'yy-mm-dd', 
        maxDate: new Date(), 
        changeMonth: true,
        changeYear: true,
        onClose: setRange 
    });

    $("#toDate").datepicker({
        dateFormat: 'yy-mm-dd', 
        changeMonth: true,
        changeYear: true,
        beforeShow: setRange
    });
}
function setRange()
{
    currentDate = new Date();
    var fromDate = $('#fromDate').datepicker('getDate');
    if(fromDate != null && fromDate != '') {
        return { minDate: fromDate }        
    }
}

编辑: 写这个

<input type="text" id="fromDate" name="fromDate" autocomplete="off" readonly="readonly" onmouseover="showRestricedDatePicker()"  onclick="showRestricedDatePicker();" />

<input type="text" id="toDate" name="toDate" autocomplete="off" readonly="readonly" onmouseover="showRestricedDatePicker()"  onclick="showRestricedDatePicker()" />

并删除此代码

 $('#datepick').click(function()
        {
            showRestricedDatePicker();
        });
        $('#datepickto').click(function()
        {
            showRestricedDatePicker();
        });