Ustawienia datapicker Bootstrap minDate/startDate z innego datepicker

Question

Na mojej stronie znajdują się dwa datepiki i oba są bootstrap. Warunkiem jest, że data początkowa nigdy nie jest wysoka w stosunku do daty zakończenia. Oznacza datę zakończenia Atrybut (minDate) musi zostać zmieniony, gdy data początkowa zostanie zmieniona przez datepicker, a ta sama, gdy data zakończenia zostanie zmieniona, min zakres kalendarza datepikera daty rozpoczęcia powinien być zgodny z wartością daty zakończenia.

Mam nadzieję, że rozumiesz mój problem

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

Zrobiłem jsfiddle robić, co chcesz. Jak pqdong skomentowałeś, że dzwoniłeś datetimepicker zamiast datepicker podczas ustawiania daty zakończenia.

Oto javascript pracy:

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

nie mam wystarczająco reputacja tocomment na doskonałą odpowiedź Razzildinho, ale chciała zaoferować jeden mały dodatek, który pomoże użytkownikom, który jest zwrócenie uwagi na wybrane dni na drugim datepicker. Można to zrobić poprzez dodanie tej linii:

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

Więc w kontekście będą wyglądać następująco:

$(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); 
    }); 

});