DateTimePicker: Einstellen eines Datumsbereichs und eines dritten Datums danach

Question

Ich muss eine Reihe von Daten mit dem Plugin DateTimePicker plus ein bestimmtes drittes Datum nach diesem Bereich festlegen.

Dies ist der Code, den ich habe bisher:

HTML

<div class="form-group"> 
    <label for="startdate" class="control-label">Start Date</label> 
    <div class="input-group date" id="startdate"> 
    <input type="text" class="form-control" /> 
    <span class="input-group-addon"> 
     <span class="glyphicon-calendar glyphicon text-primary"></span> 
    </span> 
    </div><!-- input-group --> 
</div><!-- form-group --> 

<div class="form-group"> 
    <label for="enddate" class="control-label">End Date</label> 
    <div class="input-group date" id="enddate"> 
    <input type="text" class="form-control" /> 
    <span class="input-group-addon"> 
     <span class="glyphicon-calendar glyphicon text-primary"></span> 
    </span> 
    </div><!-- input-group --> 
</div><!-- form-group --> 

<div class="form-group"> 
    <label for="thirddate" class="control-label">Third Date</label> 
    <div class="input-group date" id="thirddate"> 
    <input type="text" class="form-control" /> 
    <span class="input-group-addon"> 
     <span class="glyphicon-calendar glyphicon text-primary"></span> 
    </span> 
    </div><!-- input-group --> 
</div><!-- form-group --> 

JAVASCRIPT

$(function() { 

    //Enablabling linked pickers 
    $('#startdate,#enddate,#thirddate').datetimepicker({ 
     format: 'MM/DD/YYYY', 
     useCurrent: false 
    }); 

    //Setting the range of dates 
    $("#startdate").on("dp.change", function (e) { 
     $('#enddate').data("DateTimePicker").minDate(e.date); 
    }); 
    $("#enddate").on("dp.change", function (e) { 
     $('#startdate').data("DateTimePicker").maxDate(e.date); 
    }); 

    //Setting a third date in the future after the range 
    $("#thirddate").on("dp.change", function (e) { 
     $('#enddate').data("DateTimePicker").minDate(e.date); 
    }); 
}); 

Die DateTimePickers für den Bereich arbeiten gut, aber die dritte ist nicht, da es den minDate-Wert nicht richtig annimmt.

Answer 1

Hoffe das hilft. Die dritte Datumsauswahl ermöglicht die Datumsauswahl nach dem Enddatum.

<script> 
    $(document).ready(function() { 
     //Enablabling linked pickers 
     $('#startdate,#enddate,#thirddate').datetimepicker({ 
      format: 'MM/DD/YYYY', 
      useCurrent: false 
     }); 

     //Setting the range of dates 
     $("#startdate").on("dp.change", function (e) { 
      $('#enddate').data("DateTimePicker").minDate(e.date); 
     }); 
     $("#enddate").on("dp.change", function (e) { 
      $('#startdate').data("DateTimePicker").maxDate(e.date); 
      $('#thirddate').data("DateTimePicker").minDate(e.date); //Added this 
     }); 

     /* Remove this */ 

     //Setting a third date in the future after the range 
     //$("#thirddate").on("dp.change", function (e) { 
     // $('#enddate').data("DateTimePicker").minDate(e.date); 
     //}); 
    }) 
</script>