Question

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

例如：

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

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

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

Answer 2

这很容易

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

Answer 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库允许您指定文化（理想地使用请求的语言），以便用户可以以其文化格式输入日期。

Answer 4

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

Answer 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*((\\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 datepicker: validate date mm/dd/yyyy

Answer 6

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

var myDate = new Date(userInputString);

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

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

jquery datepicker：验证当前输入值？

6 个答案: