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

Question

我试图扩展jQuery UI Datepicker以添加一些验证.

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

我创造了小提琴来表明问题.

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

问题演示

---

注意:

我知道如何使用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

可能会抛出许多异常：

如果格式或值为空，则“参数无效”

如果格式指示了随后找不到的数值，则“位置 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.datepicker2usinf ui.widget.factory。

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

使用它您可以扩展默认值、绑定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/