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

【问题标题】：Unable to select second date in datepicker无法在日期选择器中选择第二个日期
【发布时间】：2020-01-22 02:29:06
【问题描述】：

我有选择“开始日期”和“结束日期”的日期字段，我想做的是禁用上一个日期并在“开始日期”字段和“结束日期”字段中显示今天的日期，我想显示 +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>

请帮助我哪里出错了，如果我选择今天的日期，我的代码可以正常工作，但是当我选择高级日期时，它会禁用“结束日期”字段。

【问题讨论】：

标签： javascript jquery datepicker jquery-ui-datepicker

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：