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>