Extension of jQuery user interface components (overriding jQuery Datepicker to prevent incorrect input)

Question

I am trying to extend the jQuery UI Datepicker to add some validations.

I searched a lot on the Internet, but I could not get any help. I found the SO question jquery-datepicker-function-override , there is no way to change the textinput behavior, the datepicker component only supports the onSelect event, which fires after the date is selected not when we change the date using textinput.

I created a script 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. The first text entry contains 05-ddd-2014, and the second contains March 05, 2014, both of which are incorrect dates.

Problem

---

NOTE.

I know how to use the datepicker component, I want to support checking when I press / enter the keyboard. I need to extend the jQuery UI Datepicker component. The question is not in the date format. To simplify the question, I choose a simple format (dd-M-yy (ie 02-Feb-2014)). The question is how to handle the event of a change in text input in case of incorrect dates.

---

Currently, I support only one dd-M-yy input format (i.e. February 02, 2014).

When I enter any wrong format directly in the text input (i.e. 02-xxx-2014) , the current date of the system (current behavior) is displayed in the date selection list.

Is there any way I can check the text entered in the text input and assign it a datepicker.

I tried to use the keydown event for textinput, but sometimes it did not give the right key, maybe the jQuery UI Datepicker handles 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 for extending jQuery UI Datepicker or jQuery UI conmponents in general.

Answer 1

You can try using $.datepicker.parseDate( format, value, settings ) in the blur event if the function returns an exception, for example

There are several exceptions:

"Invalid arguments" if the format or value is null

'Missing number at position nn', if a numerical value is specified in the format, this is not detected

'Unknown name at position nn', if the format is specified day or month it is not detected

'Unexpected literal at position nn' if the format indicates a literal value that is then not found

If you are raised in catch, you can show your warning and force focus on the field.

the 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 create your own widget, for example 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 values ​​and bind keydown and keyup .

The old value is stored in keydown, and the input is checked on the keyboard, and if not, restore the old value.

the 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/

Answer 2

Try it,

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