jQuery DatePicker不遵守最小和最大日期范圍設置

Question

在我的MVC應用程序中，我有一個函數可以返回我的一張表中的最小日期和最大日期，而我試圖使用這些日期來限制用戶可以在JQuery DatePicker中選擇的日期范圍。

該模型具有兩個DateTime類型的屬性

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime HalfHourlyStartDate { get; set; }




    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime HalfHourlyMinDate { get; set; }

這些是從數據庫的后端代碼中填充的。 然后在頁面中，我有兩個這樣定義的隱藏字段

  @Html.HiddenFor(x => x.HalfHourlyMinDate) @Html.HiddenFor(x => x.HalfHourlyMaxDate) 

然后在我的頁面中，我有這段代碼來設置日期選擇器的最小和最大范圍

 $('.input-group.date').datepicker({ format: "dd/mm/yyyy", todayBtn: true, language: "en-GB", forceParse: true, autoclose: true, calendarWeeks: true, todayHighlight: true, changeMonth: true, changeYear: true }); var minDate = new Date($('#HalfHourlyMinDate').val()); var maxDate = new Date($('#HalfHourlyMaxDate').val()); $('.input-group.date').datepicker("change", { minDate: minDate }); $('.input-group.date').datepicker("change", { maxDate: maxDate }); 

但這不起作用！ 當我運行我的應用程序時，日期選擇器仍然允許選擇不受限制的日期。 當我在這里出錯時，有人可以建議我嗎？

*** Ive也嘗試過這種方法，但這也不起作用

 $('.input-group.date').datepicker('option', 'minDate', minDate); $('.input-group.date').datepicker('option', 'maxDate', maxDate); 

**更新

我已經添加了一個日期函數（位於stackoverflow上），該函數從隱藏字段中的字符串值創建一個javascript日期對象，但仍然無法正常工作。

 var minDate = compareDate($('#HalfHourlyMinDate').val()); var maxDate = compareDate($('#HalfHourlyMaxDate').val()); function compareDate(str1) { // str1 format should be dd/mm/yyyy. Separator can be anything eg / or -. It wont effect var dt1 = parseInt(str1.substring(0, 2)); var mon1 = parseInt(str1.substring(3, 5)); var yr1 = parseInt(str1.substring(6, 10)); var date1 = new Date(yr1, mon1 - 1, dt1); return date1; } 

**更新

好的，我已經嘗試過了，仍然沒有用！ 有任何想法嗎 ？ 這應該是很簡單的:-)

 var minDate = new Date(2017, 9, 9); var maxDate = new Date(2017, 10, 9); $(".input-group.date").datepicker({ format: "dd/mm/yyyy", todayBtn: true, language: "en-GB", forceParse: true, autoclose: true, calendarWeeks: true, todayHighlight: true, changeMonth: true, changeYear: true, minDate: minDate, maxDate: maxDate }); 

Answer 1

確保您的最小日期和最大日期具有正確的javascript格式，在這里您可以查看示例及其正常工作方式。

您可以嘗試粘貼或修改它，並從數據庫中填充您要填充的值以嘗試對其進行修復。

 $( function() { const minDate = new Date($("#minDateInput").val());//new Date(2017, 7, 1); const maxDate = new Date($("#maxDateInput").val());//new Date(2017, 12, 1); $( "#datepicker" ).datepicker({ format: "dd/mm/yyyy", todayBtn: true, language: "en-GB", forceParse: true, autoclose: true, calendarWeeks: true, todayHighlight: true, changeMonth: true, changeYear: true, minDate: minDate, maxDate: maxDate }); } ); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <label for="maxDateInput">Min:</label> <input type="text" id="minDateInput" name="minDateInput" value="01/01/2017"/> <label for="maxDateInput">Max:</label> <input type="text" id="maxDateInput" name="maxDateInput" value="5/20/2017"/> <p>Date: <input type="text" id="datepicker"></p>