datepickerから正しい日付を選び、不正な日付にユーザーを入力できないように制限する

Question

私は、日付を選ぶためにJQuery-UIの日付ピッカーを使用しています。私の目標は、ユーザーに誤って変更させることなく、正しい日付（MM/DD/YYYY）を選択させることです。これは必要項目です。

日付ピッカーを使用してそれを行い、ユーザーが19/01/2017のように間違ったものを入力していないことを確認しました。（月が間違っています）.on('keypress', function(e){ e.preventDefault(); })この行は許可されませんユーザーは入力ボックスに何かを書く。

私の日付ピッカー入力ボックスで試した次のことは、読み込み専用にしているので、コード行を使用する必要はありませんが、読み込みを行うと、フォームに必要な機能が取り除かれます。

問題

問題は私の他の入力ボックスのすべてが、私はそれらのいずれかを入力することはできません意味、今無効になっています。

$(function() { 
 
    $("#datepicker").datepicker(); 
 

 
    }).on('keypress', function(e) { 
 
    e.preventDefault(); 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"> 
 
<script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
 
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> 
 

 
<script src="js/findbrowser.js" type="text/javascript"></script> 
 
<script src="js/jquery.maskedinput.min.js" type="text/javascript"></script> 
 

 

 

 
    <div class="form-group"> 
 
    <p>Date </p><input class="form-control" type="text" id="datepicker" required></p> 
 
    <p>Name: </p><input type="text" name="LastName"> 
 
    </div>

Answer 1

現在、ドキュメント全体にイベントハンドラを追加している、あなたは実際には日付ピッカー要素に追加します。以下を参照してください：

$(function() { 
 
    $("#datepicker").datepicker().on('keypress', function(e) { 
 
    e.preventDefault(); 
 
    }) 
 
    })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"> 
 
<script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
 
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> 
 

 
<script src="js/findbrowser.js" type="text/javascript"></script> 
 
<script src="js/jquery.maskedinput.min.js" type="text/javascript"></script> 
 

 

 

 
    <div class="form-group"> 
 
    <p>Date </p><input class="form-control" type="text" id="datepicker" required></p> 
 
    <p>Name: </p><input type="text" name="LastName"> 
 
    </div>

Answer 2

直接おのpreventDefaultを使用して、ウィンドウ要素のすべてを無効にしている関数を呼び出すことによって。

$("#datepicker").datepicker().on('keypress', function(e) { 
 
     preventDefault(e); 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"> 
 
<script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
 
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> 
 

 
<script src="js/findbrowser.js" type="text/javascript"></script> 
 
<script src="js/jquery.maskedinput.min.js" type="text/javascript"></script> 
 

 

 

 
    <div class="form-group"> 
 
    <p>Date </p><input class="form-control" type="text" id="datepicker" required></p> 
 
    <p>Name: </p><input type="text" name="LastName"> 
 
    </div>