Question

我正在尝试扩展jQuery UI Datepicker 以添加一些验证。

我在互联网上搜索了很多，但我无法得到任何帮助。我找到了问题jquery-datepicker-function-override，没有办法修改textinput行为，datepicker组件只支持 onSelect 事件，在选择日期之后触发，而不是在我们通过更改日期时触发的TextInput。

我创造了小提琴以显示问题。

我有两个日期选择器，都显示错误的日期。在这种情况下，日期选择器显示系统的当前日期。第一个textinput包含05-ddd-2014，第二个包含05-march-2014，两个都是错误的日期。

Problem Demo

注意：

我知道如何使用datepicker组件，我想支持按下/键入键盘的验证。我需要扩展jQuery UI Datepicker组件问题不是关于日期格式。为简化问题，我选择简单格式（dd-M-yy（即02-Feb-2014））。问题是如果错误的日期处理文本输入更改事件。

我目前只支持一种输入格式dd-M-yy（即02-Feb-2014）。

当我直接在文字输入 （即02-xxx-2014） 中输入任何错误格式时，日期选择器正在显示系统的当前日期（当前行为）。

有什么办法，我可以验证在文本输入中输入的文本并将其分配给datepicker。

我尝试在textinput上使用keydown事件，但有时候没有按下正确的键，可能是jQuery UI Datepicker正在处理这个事件。

$('#datepicker').on("keydown", function(e) { var val = this.value; var ar = val.split("-"); // dd - parse the date, do the required validation console.log( ar[0], isNaN(ar[0]) ); });

有没有最佳做法来扩展jQuery UI Datepicker 或jQuery UI conmponents。

Answer 1

您可以尝试在$.datepicker.parseDate( format, value, settings )事件中使用blur，如果该函数返回并且异常如

可能会抛出许多例外情况：

'无效的参数'，如果格式或值为null
     如果格式指示数值，则
'在位置nn处缺少数字'   然后找不到

'位置nn'的未知名称，如果格式指示日期或月份名称   然后找不到
     如果格式表示文字，则
'位置nn处的意外文字'   那时未找到的值

如果在捕获区中被抬起，您可以显示警报，并强制关注该字段。

代码：

$(".datepicker").datepicker({
    dateFormat: "dd-M-yy",
    showOtherMonths: true

}).on("blur", function (e) {
    var curDate = $(this).val();
    try {
        var r = $.datepicker.parseDate("dd-M-yy", curDate);
    } catch(e) {
        alert('Not VALID!');
        $(this).focus()
    }
});

演示：http://jsfiddle.net/IrvinDominin/L6e6q/

更新

您可以构建自己的小部件，例如ui.datepicker2 usinf ui.widget.factory。

使用与所有相同的抽象创建有状态的jQuery插件 jQuery UI小部件。

使用它可以扩展默认值并绑定keydown和keyup事件。

在keydown上存储旧值，并在keyup上验证输入，如果无效，则恢复旧值。

代码：

$.widget("ui.datepicker2", {
    _init: function () {
        var $el = this.element;
        $el.datepicker(this.options);

        if (this.options && this.options.checkDate) {
            $el.on("keydown", function (e) {
                var curDate = $el.val();
                $el.attr("oldValue", curDate);
                return true;
            });
            $el.on("keyup", function (e) {
                var curDate = $el.val();
                try {
                    var r = $.datepicker.parseDate("dd-M-yy", curDate);
                } catch (ex) {
                    alert('Not VALID!');
                    $el.val($el.attr("oldValue"));
                    $el.focus();
                }
            });
        }
    }
});

$(".datepicker").datepicker2({
    dateFormat: "dd-M-yy",
    showOtherMonths: true,
    checkDate: true
})

演示：http://jsfiddle.net/IrvinDominin/GLWT3/

Answer 2

试试这个，

JsFiddle

$(function() {
    $( "#datepicker" ).datepicker({ dateFormat: "yy-M-dd" });

    $('#datepicker').on("keyup", function(e) {

    var val = this.value;
        if(!ValidateDate(val)){
        console.log("Date must be 2014-Mar-01 Format")
        }



});
  });


function ValidateDate(dtValue)
{
    console.log(dtValue)
var patt = new RegExp(/^20\d\d-(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)-(0[1-9]|[12][0-9]|3[01])$/);
var res = patt.test(dtValue);
return res;
}

扩展jQuery UI组件（覆盖jQuery Datepicker以防止错误输入）

2 个答案:

更新