如何根据第一个日期选择器更改第二个日期选择器日期？答案

【问题标题】：How to change 2nd Date picker date base on 1st Date picker?如何根据第一个日期选择器更改第二个日期选择器日期？
【发布时间】：2019-07-25 10:39:33
【问题描述】：

我有两个日期选择器用于开始日期和结束日期。当页面加载结束日期为当前日期后 3 个月且开始日期为当前日期时自动执行。

所以，如果我在日期选择器中更改开始日期，我希望我的第二个日期选择器需要自动更新。

怎么做？使用 jquery。

下面是我的代码，但没有用，

$(".start_date").datepicker({
    onSelect: function (dateText) {
        var date = dateText, y = date.getFullYear(), m = date.getMonth();
        var lastDay = new Date(y, m + 4, -2);
        $('.end_date').datepicker("setDate", lastDay);

    }
});

1：

【问题讨论】：

你试过changeDate事件吗？
试过但第二个日期选择器没有更新
您使用的是哪个日期选择器？请在此处提供参考。
{{Form::text($name, $subscription->getAttribute($field) , array('id' => $name, 'class' => 'form-control datepicker', 'readonly' => 'readonly', 'title' => '订阅日期', 'placeholder' => ''))}}

标签： jquery date datepicker jquery-ui-datepicker

【解决方案1】：

通过 jquery 你可以这样做尝试下面的答案

$(document).ready(function() {
var months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
 $('.start_date').datepicker({
  format: 'MM dd,yyyy',
  autoclose: true
});

$('.start_date').datepicker().on(
      'change',
      function() {
       var comDate = $(this).val().split(' '); 
       var newmonth = months.indexOf(comDate[0]) + 3;
       var dayyear = comDate[1].split(',');
       // var newmonth = parseInt(comDate[1]) + 2;
        var newStart = new Date(dayyear[1], newmonth, dayyear[0]);
       
        $('.end_date').datepicker({
            startDate : newStart,
            format: 'MM mm,yyyy',
              autoclose: true
        });
        
         $('.end_date').val(months[newStart.getMonth()]+ ' '+newStart.getDate()+','+newStart.getFullYear());
   });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

 <div class="container">
	

    <div class="row">
   
        <div class="col-sm-6">
            <div class="input-group date">
      <input type="text" id="card_form_plan_start_date" class="form-control timepicker start_date" name="card_form_plan_start_date"> <input type="text" id="card_form_plan_end_date" class="form-control timepicker end_date" name="card_form_plan_end_date">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>
        </div>
    </div>


</div>

【讨论】：