防止用户在Datepicker文本框中输入无效的dateformat而不将其禁用

时间:2018-11-19 05:24:26

标签: javascript jquery jquery-ui-datepicker

我有一个要求,用户应该能够通过手动键入以及使用日期选择器在文本框中输入日期。我想防止用户在文本框中键入无效的日期格式。

例如:我使用的是mm/dd/yy格式,则用户在mm列中输入的字符数不能超过12,而在日期列中应按照月份(30 / 31/28)等等。

我尝试使用datepicker类的constrainInput属性,但是它不能按预期工作。

$("#datepicker1").datepicker({
   constrainInput:"true",
   dateFormat:"mm/dd/yy"
});
<input type="text" id="datepicker1"/>

1 个答案:

答案 0 :(得分:3)

此示例使用带日期选择器的inputmask,您可以参考:

$("#datepicker1").datepicker({
   constrainInput:"true",
   dateFormat:"mm/dd/yy"
});


var maskConfig = {
      leapday: "29-02-",
      separator: "/",
      showMaskOnHover: false,
      showMaskOnFocus: false,
      placeholder: "__/__/____"
}

$('#datepicker1').inputmask('mm/dd/yyyy',maskConfig);
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css">

<input type="text" id="datepicker1"/>