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 ponent 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 ponent, I want to support the validation on pressing / typing the keyboard. I need to extend the jQuery UI Datepicker ponent 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 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 ponent 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 ponent, I want to support the validation on pressing / typing the keyboard. I need to extend the jQuery UI Datepicker ponent 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.

• javascript
• jquery
• jquery-ui
• datepicker

• Would greatly appreciate if you can put your code up on JSFiddle or some other collaborative development site. It will help us figure out where exactly you are stuck. Just a thought. – Sachin Sharma Commented Feb 10, 2014 at 10:24
• You can trap the change event of the input: stackoverflow./questions/11228689/… – Salman Arshad Commented Feb 10, 2014 at 10:24
• One of the best-practice I can think on the top of my head is to simply disable any free-text-entry in date-picker box. – Sachin Sharma Commented Feb 10, 2014 at 11:31
• @Sachin Sharma I need the user to be able to enter the date through textinput and datepicker ui too. – user3278797 Commented Feb 10, 2014 at 12:03
• did you try $('#datepicker').on("change", function(e) { OR $('#datepicker').on("blur", function(e) { – Lab Commented Feb 12, 2014 at 12:35

2 Answers 2

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/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/IrvinDominin/GLWT3/

Try this,

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