Extending jQuery UI components ( Overriding jQuery Datepicker to prevent wrong input)

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.

Problem Demo

---

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.