Créer des sélecteurs de date dépendants à l'aide de bootstrap-datepicker

Question

Je dois créer deux sélecteurs de date en utilisant le marqueur date de https://github.com/uxsolutions/bootstrap-datepicker afin que la date sélectionnée dans le premier datepicker soit utilisée comme date de début de la seconde. Les dates avant le sélecteur de date du premier désactivé dans la seconde.

Le code HTML pour la première dattier:

<div class="col-sm-6 row-margin" id="div-last-day"> 
<div class="input-group date"> 
<input type="text" class="test-width form-control input-xs" name="last-day-worked" id="last-day" placeholder="Select your last Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span> 

Deuxième dattier:

<div class="col-sm-6 row-margin" id="div-separation-day"> 
    <div class="input-group date"> 
     <input type="text" class="test-width form-control input-xs" name="separation-day-worked" id="separation-day" placeholder="Select your Separation Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span> 
</div> 
    </div> 

Voici une partie de mon code:

$("#div-last-day .input-group.date").datepicker({ 
      format: "dd-M-yyyy", 
      todayHighlight: true, 
      autoclose: true, 
     }); 
     $('#div-last-day .input-group.date').datepicker() 
     .on('changeDate', function (e) { 
      var lastdate = $('#div-last-day .input-group.date').datepicker('getDate'); 
      var date = new Date(lastdate); 
      var curr_date = date.getDate(); 
      var curr_month = date.getMonth(); 
      var curr_year = date.getFullYear(); 
      perfect_date = curr_date + "-" + m_names[curr_month] 
      + "-" + curr_year; 
      $("#div-separation-day .input-group.date").datepicker({ 
       format: "dd-M-yyyy", 
       todayHighlight: true, 
       startDate: perfect_date, 
       autoclose: true, 
      }); 
     }); 

H Le violon sur lequel je travaille est https://jsfiddle.net/5tpn12L8/

Le violon fonctionne pour la première fois mais lorsque je change la date dans le premier sélecteur de date, il ne met pas à jour le deuxième sélecteur de date.

Answer 1

Vous pouvez le faire comme ci-dessous:

HTML:

<input class="form-control" id="txtFromDate" /> 
<input class="form-control" id="txtToDate" /> 

JQUERY:

$(document).ready(function() { 
    $("#txtFromDate").datepicker({ 
     format: 'dd/mm/yyyy', 
     autoclose: 1, 
     //startDate: new Date(), 
     todayHighlight: false, 
     //endDate: new Date() 
    }).on('changeDate', function (selected) { 
     var minDate = new Date(selected.date.valueOf()); 
     $('#txtToDate').datepicker('setStartDate', minDate); 
     $("#txtToDate").val($("#txtFromDate").val()); 
     $(this).datepicker('hide'); 
    }); 

    $("#txtToDate").datepicker({ 
     format: 'dd/mm/yyyy', 
     todayHighlight: true, 
     //endDate: new Date() 
    }).on('changeDate', function (selected) { 
     $(this).datepicker('hide'); 
    }); 
}); 

jsfiddle DEMO

Answer 2

fait timepicker a sa propre documentation que vous pouvez utiliser comme

$('#timepicker_input').datetimepicker({ 
    format: "dd-M-yyyy", 
    todayHighlight: true, 
    autoclose: true, 
    onSelect: function(dateText, inst){ 
     //here perform the change you want 
    } 
});