Question

我有一个日期字段，可以选择“开始日期”和“结束日期”，我想做的是禁用以前的日期，并从今天的日期开始在“开始日期”字段和“结束日期”字段中显示，我想展示+3天，而不是更多。我已经编写了代码，但是只有当我选择今天的日期时才有效，如果我选择的日期是9月25日，那么它将禁用“结束日期”中的所有日期。这是我的代码：

<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input  value=""  placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input  value=""  placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>

JavaScript代码：

<script>
    $(function() {
        $('#dob').datepicker({
        changeMonth: true, 
        changeYear: true, 
        yearRange: '2012:2020',
        minDate: new Date(),
        onSelect: function(date){

            var selectedDate = new Date(date);
            var msecsInADay = 86400000;
            var endDate = new Date(selectedDate.getTime() + msecsInADay);

            $("#dob2").datepicker( "option", "minDate", endDate );
            $("#dob2").datepicker( "option", "maxDate", '+2d' );
        }
    });
    });
   $(function() {
        $('#dob2').datepicker({changeMonth: true, changeYear: true, 
    yearRange: '2012:2020'});
   });
</script>

如果我选错了日期，请帮助我，如果我选择了今天的日期，我的代码将起作用，但是当我选择高级日期时，它将禁用“结束日期”字段。

Answer 1

我通过添加一些更改解决了我的问题：

<script>
    $(function() {
        $('#dob').datepicker({
        changeMonth: true, 
        changeYear: true, 
        yearRange: '2012:2020',
        minDate: new Date(),
        maxDate: '+2y',
        onSelect: function(date){
            var selectedDate = new Date(date);
            var msecsInADay = 86400000;
            var endDate = new Date(selectedDate.getTime() + msecsInADay);
            var lastDate = new Date(selectedDate.getTime() + 2 * msecsInADay);
            $("#dob2").datepicker( "option", "minDate", endDate );
            $("#dob2").datepicker( "option", "maxDate", lastDate );
        }
    });
    });
</script>

Answer 2

$(function() {
        $('#dob').datepicker({
        changeMonth: true, 
        changeYear: true, 
        yearRange: '2012:2020',
        minDate: new Date(),
        onSelect: function(date){
            var selectedDate = new Date(date);
            $("#dob2").datepicker( "option", "minDate", new Date(selectedDate.getTime() + 86400000) );
            $("#dob2").datepicker( "option", "maxDate",  new Date(selectedDate.getTime() + (3*24*60*60*1000)) ); //where 3 is for 3 days.you can change it according to your need  
        }
    });
        $('#dob2').datepicker({changeMonth: true, changeYear: true, yearRange: '2012:2020'});

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input  value=""  placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input  value=""  placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>

无法在日期选择器中选择第二个日期

2 个答案: