Question

如何限制用户在“Internal_Deadline1”字段中选择小于所选日期的“Client_Deadline1”字段日期。

代码：

        <script type='text/javascript'>
        //<![CDATA[
        $(function () {
        $('.one').datepicker();
        $('#data').on('change', '.one', function (date) {                
        var date2 = $(this).datepicker('getDate');
        date2.setDate(date2.getDate() + 3);
        var day2=date2.getDay(); //0=Sun, 1=Mon, .., 6=Sat
        if(day2==3){//Sunday
    date2.setDate(date2.getDate()+0);
    }
    if(day2==2){//Saturday
    date2.setDate(date2.getDate()+1);
    }
    if(day2==1){//friday
    date2.setDate(date2.getDate()+2);
    }
        else if(day2==0){//Thursday
        date2.setDate(date2.getDate()+2);
        }
        else if(day2==6){
        date2.setDate(date2.getDate()+2);
        }
        $(this).parent('td').next('td').find('.two').datepicker('setDate', date2);
        });
        $('.two').datepicker();
        });
        $(document).ready(function() {
        var currentItem = 1;
        $(".datepicker").datepicker();
        $('#addnew').click(function(){
        currentItem++;
        $('#items').val(currentItem);
        var strToAdd = '<tr><td style=""><input type="text" name="task'+currentItem+'" id="task'+currentItem+'" value="" /></td><td style=""><input type="text" name="Description'+currentItem+'" id="Description'+currentItem+'" value="" /></td><td style="width: 160px;"><input type="text" class="one datepicker" name="Internal_Deadline'+currentItem+'" id="Internal_Deadline'+currentItem+'" /></td><td style=""><input type="text" class="two datepicker" name="Client_Deadline'+currentItem+'" id="Client_Deadline'+currentItem+'" /></td><td style=""><input type="text" class="datepicker" name="Actual_Deadline'+currentItem+'" id="Actual_Deadline'+currentItem+'" /></td><td style="width:83px;"></td></tr>';
        $('#data').append(strToAdd);
        $(".datepicker").datepicker(); 

        });
        });
        //]]>
        </script>

HTML：

        <input type="button" id="addnew" name="addnew" value="Add a Row" />
        <TABLE id="data" class="dd" style="">
        <TR>
        <td style=""><input type="text" name="task1" id="task1" value="" /></td><td style=""><input type="text" name="Description1" id="Description1" value="" /></td><td style="width: 160px;"><input type="text" class="one datepicker" name="Internal_Deadline1" id="Internal_Deadline1" value="" /></td><td><input type="text" class="two datepicker" name="Client_Deadline1" id="Client_Deadline1" value="" /></td><td style=""><input type="text" class="datepicker" name="Actual_Deadline1" id="Actual_Deadline1" value="" /></td><td style="width: 83px;"></td></tr>
        <input type="hidden" id="items" name="items" value="1" /> 
        </TABLE>

Answer 1

这是我写的假日预订系统的一个例子。当用户选择开始日期时，结束日期必须是从开始日期开始的未来。

这是表格

<form action="test.html" method="post" enctype="multipart/form-data" class="createForm" id="createForm"> 

    <div>
        <label for="startDate" >First day</label>
        <input style="width: 100px" type="text" id="startDate" name="startDate" size="10"/>
    </div>

    <div>
        <label for="endDate" >Last Day</label>
        <input style="width: 100px" type="text" id="endDate" name="endDate" size="10"/>
    </div>

</form>

以下是使用jQuery UI进行日期选择器魔术的代码，关于startDate更改的注意事项，它在endDate上设置了最小值

$( "#startDate" ).datepicker({ changeMonth: true,
        changeYear: true,
        dateFormat:'dd/mm/yy',
        showButtonPanel: true,
        firstDay: '1',
        beforeShowDay: $.datepicker.noWeekends,

        // This function changes the 'endDate' calendar picker to show future days
        onSelect: function(dateStr) {
            $('#endDate').datepicker('option', 'defaultDate', dateStr);
            $('#endDate').datepicker('option', 'minDate', dateStr);
        }

});

$( "#endDate" ).datepicker({ changeMonth: true,
        changeYear: true,
        dateFormat:'dd/mm/yy',
        showButtonPanel: true,
        firstDay: '1',
        beforeShowDay: $.datepicker.noWeekends          
});

希望您可以根据代码进行调整。

我在这里做了一个小提琴：JSFiddle

Jquery datepicker根据第一个字段中的选定日期限制第二个日期字段中的日期

1 个答案: