DateTimePicker：設置日期範圍和第三個日期之後

我需要使用插件DateTimePicker加上此範圍後的特定第三個日期來設置日期範圍。DateTimePicker：設置日期範圍和第三個日期之後

這是我的代碼至今：

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

的範圍內DateTimePickers工作正常，但第三個不是，因爲它不會正確地使用minDate值。

來源

2017-09-01 nicozica

btw你沒有$（「startdate」）中的拼寫錯誤嗎？不應該是$（「＃startdate」）？ –

謝謝，我編輯了錯字。不幸的是，這不是原因，在我的源代碼中它是可以的。 – nicozica

你可以發佈你的HTML標記嗎？如果選擇第三個日期會發生什麼？ –

希望這會有所幫助。第三個日期選擇器允許在結束日期之後選擇日期。

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

來源

2017-09-01 16:08:15

DateTimePicker：設置日期範圍和第三個日期之後

回答

相關問題