我一直在使用jQuery UI的Datepicker插件。 我想要能够验证所附加的输入文本框当前是否具有有效日期。
例如:
如果有人决定输入 02/30/2010，我希望能够以某种方式询问插件当前输入值是否为有效日期（在此情况下它不是有效日期）。
有人知道如何实现吗？
jQuery日期选择器：验证当前输入值？
21
- user169867
1
5今天我遇到了完全相同的问题。每次尝试使用jQuery UI时，我都会对其多少不成熟和不完整感到震惊。真是一团糟。:( - Danny Tuppeny
6个回答
8
您可以通过将文本框设置为只读，同时按您所需的日期格式进行设置来解决问题。这样用户就无法在文本框中输入任何内容，用户只能从日期选择器中选择正确的日期格式（由您设置）。请参考以下示例。
<p>Date: <input type="text" id="datepicker" size="30" readonly="readonly"/></p>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "option", "dateFormat",'yy-mm-dd');
});
</script>
- Humayoo
1
27这个可用性非常糟糕。一些用户宁愿手动输入日期，也不想在日历上浪费时间！ - Danny Tuppeny
7
这很容易
let value = $(this).val();
let format = $(this).datepicker('option', 'dateFormat');
let valueIsValid = false;
try {
$.datepicker.parseDate(format, value);
valueIsValid = true;
}
catch (e) {}
- Alexander
3
虽然这个问题已经两年了，但我最近处理了一个类似的解决方案，并发现Globalize库是最佳方法。例如，假设您有一个文本框，其中附加了jQueryUI日期选择器。当焦点离开文本框时，您可以使用Globalize来验证输入的日期。在这种情况下，如果日期无效，则文本框被清空，如果日期有效，则以标准格式放置：
$('#myDateTextBox').blur(function () {
var parsedDate = Globalize.parseDate($(this).val());
if (parsedDate == null) {
$(this).val('');
}
else {
$(this).val(Globalize.format(parsedDate, 'd'));
}
- Anna Brenden
3
我认为各种文化的日期格式在Globalize和jQueryUi DatePicker之间甚至不匹配。在globalize.culture.fr-CA.js中，我看到一个日期格式如下：yyyy-MM-dd。在datepicker-fr-CA.js中，我看到一个日期格式如下：yy-mm-dd。我认为两者之间的日期格式标记不同。大写的“M”与小写的“m”有什么区别？ - ClearCloud8
@ClearCloud8 我编写了一个实用程序，用于生成 jQueryUI 日期选择器本地化文件，以便它们与 Globalize 使用的格式匹配。 - Anna Brenden
啊，好的，这很有道理。不错的想法。 :) 仍然让我感到困惑的是为什么日期格式标记会被不一致地解释。我知道momentJs期望大写的MM，而jqueryUI Datepicker期望小写的mm。有一个一致的方法会很好...或者至少有一些资源可以比较不同软件中的标记并显示相应的等价物。 - ClearCloud8
0
我在验证器中添加了一个“truedate”方法。我很想给这个代码的作者致谢，但我不记得我在哪里找到它了。
$.validator.addMethod("truedate", function (value) {
function GetFullYear(year) {
var twoDigitCutoffYear = 10 % 100;
var cutoffYearCentury = 10 - twoDigitCutoffYear;
return ((year > twoDigitCutoffYear) ? (cutoffYearCentury - 100 + year) : (cutoffYearCentury + year));
}
if (value == null || value == '')
return true;
var yearFirstExp = new RegExp("^\\s*((\\d{4})|(\\d{2}))([-/]|\\. ?)(\\d{1,2})\\4(\\d{1,2})\\.?\\s*$");
try {
m = value.match(yearFirstExp);
var day, month, year;
if (m != null && (m[2].length == 4)) {
day = m[6];
month = m[5];
year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3]));
}
else {
var yearLastExp = new RegExp("^\\s*(\\d{1,2})([-/]|\\. ?)(\\d{1,2})(?:\\s|\\2)((\\d{4})|(\\d{2}))(?:\\s\u0433\\.)?\\s*$");
m = value.match(yearLastExp);
if (m == null) {
return null;
}
day = m[3];
month = m[1];
year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6]));
}
month -= 1;
var date = new Date(year, month, day);
if (year < 100) {
date.setFullYear(year);
}
return (typeof (date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()) ? date.valueOf() : null;
}
catch (err) {
return null;
}
}, "Please enter an actual date.");
$('form').validate({
rules: {
insurance_GL: "truedate",
},
messages: {
insurance_GL: "Insurance GL date is not valid",
}
});
编辑 我一定是从这里得到的： Jquery日期选择器：验证日期mm / dd / yyyy
- RememberME
0
查看日期选择器的dateFormat和constrainInput选项。 http://jqueryui.com/demos/datepicker/#option-dateFormat
- David Radcliffe
3
1我不使用constrainInput，因为我希望人们能够使用斜杠或破折号作为分隔符。然而，我不知道使用它如何让我知道某人输入了一个不存在的日期，比如2月30日。 - user169867
constraintInput根本没有解决这个问题。它阻止我输入文本，但无法阻止我输入“5”。 - Danny Tuppeny
@DannyTuppeny - 或许值得注意的是，尽管您所提到的是正确的，但 constraintInput 并不能防止将文本剪切并粘贴到输入框中。 - webaholik
-1
你可以使用JS Date 来验证你的日期字符串。
var myDate = new Date(userInputString);
if (myDate == "Invalid Date"){
// user input is invalid
}
还要注意，即使对于无效日期，(myDate === "Invalid Date")也会返回false。使用==是可以的，但正确的检查方式是(isNaN(d.getTime()))
- Arashsoft
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接