jQuery UI Datepicker maxDateオプションの手動日付入力検証

Question

日付を手動で入力する必要があるページにjQuery datepickerがありますが、日付が1日以内であることを検証する必要もあります。ピッカーコントロールはmaxDateで制限されていますが、手動で日付を入力すると、1日以上前に日付を入力することができます。どのように（私）それを停止するのですか？ここに私がこれまで持っていたものがあります：

Answer 1

さて、上記の答えが正しいですが、それがフォームを検証しない、ユーザーはまだフォームを送信することができるようになります、

を

私はいくつかの研究を行っていますが、nyを見つけることができませんでした。最終的に、この関数を書いてフォームを検証し、正しい日付が入力されるまでフォームを送信しません。

このコードを追加するだけで、これは 'datePicker'クラスのすべてのフィールドに適用されます。

$(".datePicker").datepicker({ 
      dateFormat: 'd/mm/yy', 
      changeMonth: true, 
      changeYear: true, 
      firstDay: 1, 
      minDate: Date.parse("1900-01-01"), 
      maxDate: Date.parse("2100-01-01"), 
      yearRange: "c-90:c+150" 
     }); 

     // validation in case user types the date out of valid range from keyboard : To fix the bug with out of range date time while saving in sql 
     $(function() { 
      $.validator.addMethod(
       "date", 
       function (value, element) { 

        var minDate = Date.parse("1900-01-01"); 
        var maxDate = Date.parse("2100-01-01"); 
        var valueEntered = Date.parse(value); 

        if (valueEntered < minDate || valueEntered > maxDate) { 
         return false; 
        } 
        return !/Invalid|NaN/.test(new Date(minDate)); 
       }, 
       "Please enter a valid date!" 
      ); 
     }); 

Answer 2

コントロールの値が直接入力されると、datepickerがイベントを発生させるかどうかわかりません。あなたは.change()イベントに関数をバインドすることができます。

$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({ 
    dateFormat: "mm-dd-yy",     // since you have defined a mask 
    maxDate: "+1", 
    showOn: "button", 
    showOtherMonths: true 

}).on("change", function(e) { 
    var curDate = $(this).datepicker("getDate"); 
    var maxDate = new Date(); 
    maxDate.setDate(maxDate.getDate() + 1); // add one day 
    maxDate.setHours(0, 0, 0, 0);   // clear time portion for correct results 
    if (curDate > maxDate) { 
     alert("Invalid date"); 
     $(this).datepicker("setDate", maxDate); 
    } 
}); 

Demo here

Answer 3

1つの選択肢は、入力フィールドを手動入力する機能を削除することです。readonly。これにより、ユーザーは手動で何かを狂って入力することを制限し、日付ピッカーの使用を強制します。

Answer 4

は、私はまったく同じ要件を持っていたし、ここでは魔法のように私のために働いたソリューションです：

$(".datepicker").attr("placeholder", "mm-dd-yyyy").change(function(){ 
    $(this).datepicker('setDate', $(this).datepicker('getDate')); 
    }).datepicker({ 
     showOn: "button", 
     maxDate: "+1", 
     showOtherMonths: true 
    }); 

修正フィドルhereサルマンAのanswer

から参照します