JQuery DatePicker不尊重最小和最大日期范围设置

Question

在我的MVC应用程序中，我有一个函数返回我的一个表中的最小和最大日期，并试图使用这些来限制用户可以在JQuery中选择的日期范围日期选择器。

该模型包含两个性质在是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; } 

这些是从从DB后端码填充的。在网页然后我有两个隐藏字段这样

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

但它不工作！当我运行我的应用程序时，日期选择器仍然允许无约束的日期选择。任何人都可以告诉我什么时候我会出错？

***香港专业教育学院也尝试过这种方式，但不工作或者

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

**更新

香港专业教育学院增加了一个日期函数（计算器上找到）是从隐藏字段中的字符串值创建一个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 e.g./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; 
 
    } 
 

**更新

好，香港专业教育学院现在尝试这样做，它仍然dosnt工作！有任何想法吗 ？这应该是相当straightforwrd :-)

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>