将 JQuery 日期选择器与输入字段验证/过滤器相结合答案

【问题标题】：Combinig JQuery datapicker with input field validation /filter将 JQuery 日期选择器与输入字段验证/过滤器相结合
【发布时间】：2009-03-25 09:19:24
【问题描述】：

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

在 JQuery 框架中最一致的方法是什么？

谢谢

备注

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

【问题讨论】：

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

您可以使用日期选择器的 formatDate 选项：http://docs.jquery.com/UI/Datepicker/formatDate

【讨论】：

否 - 我认为不使用 datepicker 时不会有任何影响
老兄，你问题的第一句话是：“我正在使用 JQueryui Datepicker”你是在使用还是没有使用 datepicker？
用户可能没有使用它。通常它连接到输入字段，我只想指定一次有效的日期范围等。

【解决方案2】：

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

【讨论】：

【解决方案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 就会识别也都是无效日期。

【讨论】：

【解决方案4】：

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

挂钩事件，例如关于日期字段的模糊，并检查如下值：

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

【讨论】：