防止用户在 Datepicker 文本框中输入无效的日期格式而不禁用它
Prevent user from entering invalid dateformat in Datepicker Textbox without disabling it
我有一个要求,即用户应该能够通过手动输入以及使用日期选择器在文本框中输入日期。我想防止用户在文本框中输入无效的日期格式。
例如:我正在使用 mm/dd/yy
格式,用户在 mm 栏中输入的内容不应超过 12
,并且在日期栏中应按照月份填写( 30/31/28) 等等。
我尝试使用日期选择器 class 的 constrainInput 属性,但它没有按预期工作。
$("#datepicker1").datepicker({
constrainInput:"true",
dateFormat:"mm/dd/yy"
});
<input type="text" id="datepicker1"/>
这个例子使用inputmask和datepicker,你可以参考:
$("#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"/>
我有一个要求,即用户应该能够通过手动输入以及使用日期选择器在文本框中输入日期。我想防止用户在文本框中输入无效的日期格式。
例如:我正在使用 mm/dd/yy
格式,用户在 mm 栏中输入的内容不应超过 12
,并且在日期栏中应按照月份填写( 30/31/28) 等等。
我尝试使用日期选择器 class 的 constrainInput 属性,但它没有按预期工作。
$("#datepicker1").datepicker({
constrainInput:"true",
dateFormat:"mm/dd/yy"
});
<input type="text" id="datepicker1"/>
这个例子使用inputmask和datepicker,你可以参考:
$("#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"/>