從datepicker中挑選正確的日期並限制用戶輸入不正確的日期

我使用JQuery-UI日期選取器來挑選日期。我的目標是讓用戶選擇正確的日期（MM/DD/YYYY）而不讓他們修改錯誤。這是一個必填字段。從datepicker中挑選正確的日期並限制用戶輸入不正確的日期

我已經設法通過使用日期選擇器來做到這一點，並確保用戶不會輸入任何不正確的東西，如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>

來源

2017-04-11 taji01

目前正在添加的事件處理程序到整個文檔，你其實只是想將它添加到日期選擇器的元素。請看下圖：

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

來源

2017-04-11 21:16:41

通過直接調用你使用的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>

來源

2017-04-11 21:19:36 Ozan

從datepicker中挑選正確的日期並限制用戶輸入不正確的日期

回答

相關問題