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

这些是从DB的后端代码填充的。在页面中，我有两个隐藏的字段，如此

＆＃13;

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

＆＃13;

然后在我的页面中，我有这个代码来设置datepicker min＆amp;最大范围

＆＃13;

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

＆＃13;

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

***我也尝试过这种方式，但这不起作用

＆＃13;

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

＆＃13;

**更新

我添加了一个日期函数（在stackoverflow上找到），它从隐藏字段中的字符串值创建一个javascript日期对象，但它仍然无法正常工作。

＆＃13;

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

＆＃13;

**更新

好的，我现在尝试了这个，它仍然无法正常工作！有任何想法吗？这应该非常简单： - ）

＆＃13;

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

＆＃13;

Answer 1

确保你的最小和最大日期具有正确的javascript格式，在这里你可以看到一个例子以及它是如何正常工作的。

您可以尝试粘贴或修改它，将您从DB填充的值放入其中以尝试修复它。

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

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

1 个答案: