jquery datepicker：验证当前输入值？

Posted 2023-05-07

【中文标题】jquery datepicker：验证当前输入值？

【英文标题】：jquery datepicker : Validate current input value?

【发布时间】：2011-03-10 03:46:21

【问题描述】：

我一直在使用 jQuery UI 中的 Datepicker 插件。我希望能够验证它附加到的输入文本框当前是否具有有效日期。

例如：

如果有人决定输入02/30/2010，我希望能够以某种方式询问插件当前输入值是否是有效日期（在这种情况下不是有效日期）。

有谁知道如何做到这一点？

【问题讨论】：

我今天遇到了同样的问题。每次我尝试使用 jQuery UI 时，我都对 jQuery UI 中的一切都是半生不熟和不完整感到震惊。真是个瓦罐。 :(

【参考方案1】：

您可以通过将文本框设为只读并根据需要设置日期格式来解决您的问题。因此用户无法在文本框中输入任何内容，用户只能从日期选择器中选择正确的日期格式（您设置的）。请看下面的例子。

<p>Date: <input type="text" id="datepicker" size="30" readonly="readonly"/></p>    
<script>
$(function() 
    $( "#datepicker" ).datepicker();
    $( "#datepicker" ).datepicker( "option", "dateFormat",'yy-mm-dd');
);
</script>

【讨论】：

这非常实用。一些用户宁愿输入他们的日期，也不愿使用日历！

【参考方案2】：

很简单

let value = $(this).val();
let format = $(this).datepicker('option', 'dateFormat');
let valueIsValid = false;
try 
    $.datepicker.parseDate(format, value);
    valueIsValid = true;

catch (e) 

【参考方案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'));
    

Globalize 库允许您指定文化（理想情况下使用请求的语言），以便用户可以输入其文化格式的日期。

【讨论】：

我认为各种文化的 dateFormats 在 Globalize 和 jQueryUi DatePicker 之间甚至不匹配。在 globalize.culture.fr-CA.js 中，我看到这样的日期格式：yyyy-MM-dd。在 datepicker-fr-CA.js 中，我看到这样的日期格式：yy-mm-dd。我不认为两者之间的日期格式标记是相同的。大写的“M”与小写的“m”如何解释？

@ClearCloud8 我编写了一个实用程序来生成 jQueryUI 日期选择器本地化文件，以便它们匹配 Globalize 中使用的格式。

啊，好吧，这很有道理。好主意。 :) 为什么日期格式标记的解释不一致仍然让我发疯。我知道 momentJs 需要大写的 MM，而 jqueryUI Datepicker 需要小写的 mm。有一个一致的方法会很好......或者至少有一些资源可以比较不同软件中的令牌并显示等效项。

【参考方案4】：

查看日期选择器的 dateFormat 和 constrainInput 选项。 http://jqueryui.com/demos/datepicker/#option-dateFormat

【讨论】：

我不使用约束输入，因为我希望人们能够使用斜杠或破折号作为分隔符。但是，我不明白使用它如何让我知道是否有人进入了不存在的一天。比如 2 月 30 日。

constraintInput 根本不能解决这个问题。它会阻止我输入文本，不会阻止我输入“5”。

@DannyTuppeny - 可能值得注意，虽然您提到的是正确的，但 constraintInput 不会阻止将文本剪切和粘贴到输入中

【参考方案5】：

我向验证器添加了一个“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*((\\d4)|(\\d2))([-/]|\\. ?)(\\d1,2)\\4(\\d1,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*(\\d1,2)([-/]|\\. ?)(\\d1,2)(?:\\s|\\2)((\\d4)|(\\d2))(?:\\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 datepicker: validate date mm/dd/yyyy

【参考方案6】：

可以使用 JS Date 来验证你的日期字符串。

var myDate = new Date(userInputString);

if (myDate == "Invalid Date")
 // user input is invalid

另请注意，(myDate === "Invalid Date") 即使对于无效日期也会返回 false。使用 == 可以正常工作，但正确的检查方法是 (isNaN( d.getTime()))