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)

然后在我的页面中，我有这样的代码来设置日期选择器min&最大范围

$('.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);

**更新

我添加了一个日期函数(可以在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 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;
}   

**更新

好的，我现在已经试过了，它仍然不起作用！有什么想法吗？这应该很直接：-)

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>