扩展jQuery UI组件（覆盖jQuery Datepicker以防止输入错误） [英] Extending jQuery UI components ( Overriding jQuery Datepicker to prevent wrong input)
问题描述
我正在尝试扩展jQuery UI Datepicker 以添加一些验证。
我在互联网上搜索了很多，但我可以没有任何帮助。我发现了这个问题， jquery-datepicker-function-override ，没有办法修改文本输入行为，datepicker组件仅支持 onSelect 事件，在通过textinput更改日期后，在日期被选择后触发。
<我已经创建了小提琴来显示问题。
我有两个日期选择器，显示错误的日期。在这种情况下，日期选择器显示系统的当前日期。第一个textinput包含05-ddd-2014，第二个包含05-march-2014，都是错误的日期。
注意：
我知道如何使用datepicker组件，我想支持按/键入键盘的验证。我需要扩展jQuery UI Datepicker组件问题不在于日期格式。为了简化问题，我选择简单格式（dd-M-yy（即02-Feb-2014））。问题是关于处理错误日期的文本输入更改事件的问题。
我目前只支持一种输入格式dd-M-yy（即2014年2月02日）。
当我在文本输入中直接输入任何错误格式 （即02-xxx-2014） ，日期选择器显示系统的当前日期（当前行为）。
有没有办法，我可以验证文本输入中输入的文本并将其分配给datepicker。
我尝试在textinput上使用keydown事件，但是它没有给出正确的键有时可能是jQuery UI Datepicker正在处理这个事件。
$（'＃datepicker '）.on（keydown，function（e）{
var val = this.value;
var ar = val.split（ - ）;
// dd - parse日期，做所需的验证
console.log（ar [0]，isNaN（ar [0]））;
}）;
是否有任何最佳做法来扩展jQuery UI Datepicker 或jQuery UI conmponents一般来说，
我非常需要它。任何帮助将不胜感激。感谢提前。
您可以尝试使用 $。datepicker.parseDate（format，value，settings ）在 blur 事件中，如果函数返回和例如
可能会抛出许多异常：
无效的参数，如果任一格式或值为空
'如果格式表示一个数字值
，那么在位置nn'上缺少号码
'位置nn'上的未知名称指示日期或月份名称
，然后找不到
'位置nn'时出现意外文字，如果格式指示一个文字
值，那么不是发现
如果在catch中提出，您可以显示警报，并强调该字段的重点。
代码：
$（。datepicker）。datepicker（{
dateFormat ：dd-M-yy，
sh owOtherMonths：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.che ckDate）{
$ el.on（keydown，function（e）{
var curDate = $ el.val（）;
$ el.attr（oldValue，curDate）;
返回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/
I am trying to extend the jQuery UI Datepicker for adding some validations.
I searched a lot in the internet, but I could not get any help. I found SO question jquery-datepicker-function-override, there is no way to modify the textinput behaviour, the datepicker component only supports onSelect event, which gets fired after the date is selected not when we change the date through textinput.
I have created fiddle to show the problem.
I have two date pickers, both showing wrong dates. In this case the date picker shows the current date of the system. First textinput contains 05-ddd-2014 and second one contains 05-march-2014, both are wrong dates.
NOTE:
I know how to use the datepicker component, I want to support the validation on pressing / typing the keyboard. I need to extend the jQuery UI Datepicker component The question is not about date format. To simplify the question, I choose simple format (dd-M-yy (i.e 02-Feb-2014)). The question is all about handling the text input change event in case of wrong dates.
I am currently supporting only one input format dd-M-yy (i.e 02-Feb-2014).
When I am entering any wrong format directly in the text input (i.e 02-xxx-2014) , the date picker is showing the current date of the system ( current behaviour ).
Is there any way, I can validate the text entered in the text input and assign it to datepicker.
I tried using keydown event on textinput, but its not giving the correct key pressed sometimes, may be jQuery UI Datepicker is handling this event.
$('#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]) );
});
Is there any best practice to extend jQuery UI Datepicker or jQuery UI conmponents in general.
I need it very badly. Any help would be greatly appreciated. Thanks in advance.
You can try using $.datepicker.parseDate( format, value, settings ) in the blur event, if the function returns and exception like
A number of exceptions may be thrown:
'Invalid arguments' if either format or value is null
'Missing number at position nn' if format indicated a numeric value that is not then found
'Unknown name at position nn' if format indicated day or month name that is not then found
'Unexpected literal at position nn' if format indicated a literal value that is not then found
If raised in the catch you can show your alert, and force a focus on the field.
Code:
$(".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()
}
});
Demo: http://jsfiddle.net/IrvinDominin/L6e6q/
UPDATE
You can build your own widget eg ui.datepicker2 usinf ui.widget.factory.
Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets.
Using it you can extend the default and bind keydown and keyup events.
On keydown store the old value, and on keyup validate the input and if not valid, restore the old value.
Code:
$.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
})
Demo: http://jsfiddle.net/IrvinDominin/GLWT3/
这篇关于扩展jQuery UI组件（覆盖jQuery Datepicker以防止输入错误）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
