JQuery DatePickerが最小および最大日付範囲の設定を尊重していない

Question

MVCアプリケーションでは、テーブルの最小値と最大値を返す関数があり、これらを使用してユーザーがJQueryで選択できる日付範囲を制限しようとしていますDatePicker。

モデルは、これらは、DBからバックエンド・コードから移入された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; } 

の二つproperitesを有しています。ページでは、私は、この

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

のように定義された2つの隠しフィールドは、その後、私のページに私が&最大範囲

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

minの日付ピッカーを設定するには、このコードを持っています

しかし、それは動作しません！私は私のアプリを実行すると、datepickerはまだunresticed日付の選択を可能にします。私はここで間違っているとき誰も私に助言することはできますか？

***アイブ氏はまた、このようにそれを試してみましたが、それdoesntの作業のいずれか

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

**更新

IVEはその（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; 
 
    } 
 

**更新

[OK]を、アイブ氏は今、これを試してもまだdosnt仕事！何か案は ？これはあなたの最小と最大の日付は、ここで、正しいjavascriptの形式を持っているあなたは例を見ることができるとどのようにそれが正常に働いていることを確認し、かなり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

でなければなりません。

あなたはそれを修正しようとしている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>