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

但是这不起作用!当我运行我的应用程序时，日期选择器仍然允许不受限制的日期选择。当我在这里出错时，有人可以告诉我吗？

***我也试过这个方法，但还是不行

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