bootstrap datypicker ändere minDate/startDate von einem anderen datepicker

Question

Es gibt zwei datepickers in meiner Seite und beide sind von Bootstrap. Die Bedingung ist nur, dass das Startdatum in Bezug auf das Enddatum nie hoch ist. Mittel Enddatum Das Attribut (minDate) muss geändert werden, wenn das Startdatum durch datepicker geändert wurde, und dasselbe, wenn das Enddatum geändert wurde, sollte der minrange des Kalenders von Startdatum datepicker dem Enddatumswert entsprechen.

Ich hoffe, dass Sie mein Problem verstehen

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

ich gemacht habe ein jsfiddle zu tun, was Sie wollen. Als pqdong kommentierte, dass Sie datetimepicker anstelle von datepicker beim Festlegen des Enddatums aufgerufen haben. Hier

ist das Arbeits 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

Ich habe nicht genug Ruf tocomment auf Razzildinho ausgezeichneten Antwort haben, wollte aber eine kleine Ergänzung bieten, die den Benutzern helfen, das ist der gewählte Tag markieren auf dem zweiten Datepicker. Sie können dies tun, indem Sie diese Zeile hinzu:

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

So in Zusammenhang wird es wie folgt aussehen:

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

});