Bootstrap datepicker change minDate/startDate from another datepicker

Question

На моей странице есть два datepickers, и оба они загружаются. Условие заключается только в том, что дата начала никогда не была высокой по отношению к дате окончания. Средство Дата окончания Атрибут (minDate) должен быть изменен, когда Дата начала изменена datepicker, и то же самое, когда дата окончания даты изменилась, минимальный график календаря даты даты начала должен соответствовать значению конечной даты.

Я надеюсь, вы понимаете мою проблему

$(document).ready(function(){ 
 
    
 
     $("#startdate").datepicker({ 
 
     
 
     todayBtn: 1, 
 
     autoclose: true, 
 
     
 
     
 
     }).on('changeDate', function (selected) { 
 
     var minDate = new Date(selected.date.valueOf()); 
 
     $('#enddate').datetimepicker('setStartDate', minDate); 
 
    }); 
 
    
 
     $("#enddate").datepicker(); 
 
});

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

 

 

 
<input type="text" placehoder="Start Date" id="startdate"/> 
 
<input type="text" placehoder="End Date" id="enddate"/>

Answer 1

Я сделал jsfiddle делать то, что вы хотите. Как прокомментировал pqdong, вы вызывали datetimepicker вместо datepicker при установке даты окончания.

Здесь работает JavaScript:

$(document).ready(function(){ 

    $("#startdate").datepicker({ 
     todayBtn: 1, 
     autoclose: true, 
    }).on('changeDate', function (selected) { 
     var minDate = new Date(selected.date.valueOf()); 
     $('#enddate').datepicker('setStartDate', minDate); 
    }); 

    $("#enddate").datepicker() 
     .on('changeDate', function (selected) { 
      var maxDate = new Date(selected.date.valueOf()); 
      $('#startdate').datepicker('setEndDate', maxDate); 
     }); 

}); 

Answer 2

У меня нет достаточно репутации tocomment на отличный ответ Razzildinho, но действительно хотел предложить одно небольшое дополнение, которое поможет пользователям, которые, чтобы выделить выбранный день на втором datepicker. Вы можете сделать это, добавив следующую строку:

$('#enddate').datepicker('setDate', minDate); 

Таким образом, в контексте будет выглядеть следующим образом:

$(document).ready(function(){ 

$("#startdate").datepicker({ 
    todayBtn: 1, 
    autoclose: true, 
}).on('changeDate', function (selected) { 
    var minDate = new Date(selected.date.valueOf()); 
    $('#enddate').datepicker('setStartDate', minDate); 
    $('#enddate').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED 
}); 

$("#enddate").datepicker() 
    .on('changeDate', function (selected) { 
     var maxDate = new Date(selected.date.valueOf()); 
     $('#startdate').datepicker('setEndDate', maxDate); 
    }); 

});