Question

我正在使用JQueryui Datepicker。但它并不会真正影响输入字段中手动输入的值。有没有什么方法可以使用相同的（客户端）代码在输入字段上指定掩码/验证（当不使用数据贴图时 - 不只是让datepicker输出正确的格式）。

在JQuery框架中执行此操作的最一致方法是什么？

由于

说明

似乎jQuery对输入设置了som限制（即，我只能输入数字 - 掩码“yymmdd”）所以主要是获得验证。

Answer 1

您可以使用datepicker的formatDate-option：http://docs.jquery.com/UI/Datepicker/formatDate

Answer 2

使用jQuery Validation plug-in。它与UI日期选择器共存;我们在申请中这样做。请注意，默认日期验证程序不会明确标记无效日期，例如“2009年2月40日”，因为它使用JavaScript日期解析器，这对于它接受的内容有点松懈。但replace the default validator with one of your own真的很容易。

Answer 3

假设您正在使用Validate插件，您可以编写一个自定义规则，重新实现ui.Datepicker自己的逻辑，以决定哪些日期是可选择的。我今天不得不写这篇文章并认为其他人可以从了解如何获益：

jQuery.validator.addMethod("vdate", function(value, element) {
    // Datepicker's internal method for choosing selectable ported to a custom validator method.
    // All criteria are the same, except othermonth is omitted.
    var inst =          $.data(element,'datepicker'); // instance data used internally by datepicker's functions
    var printDate =     $(element).datepicker("getDate");
    var minDate =       $.datepicker["_getMinMaxDate"](inst, 'min', true);
    var maxDate =       $.datepicker["_getMinMaxDate"](inst, 'max');
    var beforeShowDay = $.datepicker["_optionDatepicker"](element,'beforeShowDay');
    var daySettings =   (beforeShowDay ? beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']);
    var unselectable =  (!daySettings[0] || (minDate !=null && (printDate < minDate)) || (maxDate !=null && (printDate > maxDate)));
    return (this.optional(element) || !unselectable);
}, "Please choose a valid date");

这个特殊的addMethod具有单独检查每个字段的优点，因此如果您有多个日期选择器共享类名“vdate”但可能具有不同的minDate / maxDate / beforeShowDay设置，则Validate将检查并遵循每个日期选择器自己的规则。

另外，如果你为beforeShowDay编写了一个复杂的函数，它排除了周末，数字为黄金的日子，你妻子的生日，以及每月的最后一天，只要它在ui.Datepicker中有效，Validate就会认出所有这些都是无效日期。

Answer 4

你有什么理由不做最简单的事吗？

陷入事件，例如在日期字段的模糊处，并检查以下值：

将输入的长度与格式进行比较。
解析日期并尝试创建日期对象以验证日期是实际日期。

将JQuery datepicker与输入字段验证/过滤器结合使用

4 个答案: