Question

我使用JQuery-UI日期选择器来挑选日期。我的目标是让用户选择正确的日期（MM / DD / YYYY）而不让他们错误地修改它。这是一个必填字段。

我设法通过使用日期选择器来做到这一点，并确保用户不会输入任何不正确的内容，如19/01/2017（月份不正确）我添加了$(function() { $("#datepicker").datepicker(); }).on('keypress', function(e) { e.preventDefault(); });这行代码不允许用户在输入框中写任何内容。

我尝试使用我的日期选择器输入框的下一件事是将其设置为只读，因此我不必使用该行代码，但将其设置为只读取了表单提交中所需的功能。

问题

问题是我的所有其他输入框现已禁用，这意味着我无法输入任何输入框。

＆＃13;

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

＆＃13;

I'm trying to combine the AD attributes telephoneNumber and ipPhone into a "888.888.8888 x254" format to display in the "PersonalVoiceNum" field.

＆＃13;

Answer 1

您当前正在将事件处理程序添加到整个文档中，实际上您只想将其添加到datepicker元素中。见下文：

$(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禁用窗口元素上的所有内容。

＆＃13;

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

＆＃13;

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

＆＃13;

从datepicker中选择正确的日期并限制用户输入错误的日期

2 个答案: