How to change 2nd Date picker date base on 1st Date picker?

问题: I have two datepickers for start date and end date. Automatically when page load end date is 3 months plus from current date and start date is current date. So, I want...

问题:

I have two datepickers for start date and end date. Automatically when page load end date is 3 months plus from current date and start date is current date.

enter image description here

So, I want if I change start date in my datepicker my 2nd datepicker need to update automatically.

How to do it? using jquery.

Here is my code in below but didn't work,

$(".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:


回答1:

I hope you are using Bootstrap Datepicker. And there is no onSelect event there.

$(document).ready(function() {
  $(".start_date").datepicker({
    autoclose: true
  }).on('changeDate', function(e) {
    var date = e.date, y = date.getFullYear(), m = date.getMonth();
    var lastDay = new Date(y, m + 4, -2);
    $('.end_date').datepicker("setDate", lastDay);
  });
});
<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>


<input type="text" class="start_date">
<input type="text" class="end_date">


回答2:

by jquery you can do this try the below answer

$(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>

  • 发表于 2019-03-07 23:55
  • 阅读 ( 337 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除