web-dev-qa-db-fra.com

Bootstrap datepicker change minDate / startDate d'un autre datepicker

Il y a deux datepickers dans ma page et les deux sont de bootstrap. La condition est seulement que la date de début ne soit jamais élevée par rapport à la date de fin. Signifie que l'attribut de date de fin (minDate) doit être modifié lorsque la date de début est modifiée par datepicker et identique lorsque la date de fin est modifiée, la plage minimale du calendrier de la date de début datepicker doit être conforme à la valeur de date de fin.

J'espère que tu comprends mon problème

$(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"/>
javascriptjquerytwitter-bootstrapbootstrap-datepicker
14
vikujangid

J'ai fait un jsfiddle faisant ce que vous voulez. Comme l'a dit pqdong, vous appeliez datetimepicker au lieu de datepicker lors de la définition de la date de fin.

Voici le javascript de travail:

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

});
66
Razzildinho

Je n'ai pas assez de réputation pour commenter l'excellente réponse de Razzildinho, mais je voulais offrir un petit ajout qui aidera les utilisateurs, qui est de mettre en évidence le jour sélectionné sur le deuxième sélecteur de date. Vous pouvez le faire en ajoutant cette ligne:

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

Donc, dans le contexte, cela ressemblera à ceci:

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

});
2
Sharky Laguana