Javascript 扩展jQuery UI组件（覆盖jQuery日期选择器以防止错误输入）

我试图扩展jQueryUIDatePicker以添加一些验证

我在网上搜索了很多，但没有得到任何帮助。我发现了这样一个问题，无法修改textinput行为，datepicker组件只支持onSelect事件，该事件在选择日期后触发，而不是在我们通过textinput更改日期时触发

我创造了小提琴来展示这个问题

我有两个日期选择器，都显示错误的日期。在这种情况下，日期选择器显示系统的当前日期。第一个文本输入包含2014年5月5日，第二个文本输入包含2014年3月5日，两者都是错误的日期

---

注意：

我知道如何使用datepicker组件，我想支持按/键入键盘时的验证。我需要扩展jQueryUIDatePicker组件，问题不在于日期格式。为了简化问题，我选择了简单格式（dd-M-yy（即2014年2月2日））。问题是在日期错误的情况下如何处理文本输入更改事件。

---

我目前只支持一种输入格式dd-M-yy（即2014年2月2日）

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

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

我尝试在textinput上使用keydown事件，但有时按下的键不正确，可能是jQueryUIDatePicker正在处理此事件

$('#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日期选择器或jQuery UI组件的最佳实践。

试试这个

---

如果函数返回且类似异常，则可以尝试在

blur

事件中使用

$.datepicker.parseDate（格式、值、设置）

可能会引发许多异常：

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

如果格式指示数值，则为“nn位置缺少数字” 那就找不到了

“位置nn处的未知名称”，如果格式指示日期或月份名称 那就找不到了

“位置nn处的意外文字”如果格式指示文字 然后找不到的值

如果在抓捕中被提升，你可以表现出警觉，并将注意力集中在场地上

代码：

演示：

更新 您可以构建自己的小部件，例如

ui.datepicker2

usinf

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

使用它，您可以扩展默认值并绑定

keydown

和

keydup

事件

按下键时存储旧值，按下键时验证输入，如果无效，则恢复旧值

代码：

---

演示：

如果您能将代码放到JSFIDLE或其他协作开发网站上，将不胜感激。这将帮助我们弄清楚你到底被困在哪里。只是一个想法。您可以捕获输入的更改事件：我能想到的最佳实践之一就是简单地禁用日期选择器框中的任何自由文本输入。@Sachin Sharma我需要用户也能够通过文本输入和日期选择器ui输入日期。您尝试过$（'#日期选择器'）。在（“更改”，函数（e）{或$（#datepicker'）。在（“blur”上，函数（e）{我们可以防止输入错误的日期吗（按键时验证）。这是扩展jQuery UI组件的正确方法吗？@Basha是的，我构建得更好；检查update@Basha如果起始值错误，我们可以清除keydown中的输入吗？@Irvindiminakaedward我真的很感谢你的帮助。我需要更多，目前根据你的建议，我可以在keyup上验证，但我需要更多的用户friendly like我想防止用户在月份中输入非数字字符，并防止用户删除介于月、日和年之间的“-”字符。有没有办法做到这一点。我将非常感谢您。@Venky我想我们可以结合一个掩码输入插件来实现这一点（重写可能很长），等我有空的时候，我会试一试

$(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;
}

$(".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()
    }
});

$.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
})