Question

I have added masking to jquery datepicker & added validation.

here is the jsfiddle & Code

<input class="datepicker" type="text" />
<br /><br />
<input type="button" style="width:50px;" />

$( ".datepicker" ).datepicker({ dateFormat: 'dd-M-yy'});
$(".datepicker").mask("99-aaa-9999");

$(".datepicker").blur(function(){
var date1 = $(this).val(); 

    var validate = IsValidDate(date1);
    if(!validate ){
        alert("Invalid Date formart, Required Date Format : dd-mmm-yyyy");
    $(this).val("");
}
   });

function IsValidDate(myDate) {
                var filter = /^([012]?\d|3[01])-([Jj][Aa][Nn]|[Ff][Ee][bB]|[Mm][Aa][Rr]|[Aa][Pp][Rr]|[Mm][Aa][Yy]|[Jj][Uu][Nn]|[Jj][u]l|[aA][Uu][gG]|[Ss][eE][pP]|[oO][Cc]|[Nn][oO][Vv]|[Dd][Ee][Cc])-(19|20)\d\d$/
                                return filter.test(myDate);
            }

Now i am facing a problem. When user tries to select date from calendar the validation fires, Which should not happen.

Can anyone suggest whats wrong in my code. Thanks 🙂

Well I have managed to solve the problem but dont know if its the most efficient way

here is the updated code & link

http://jsfiddle.net/smdvA/191/

$( ".datepicker" ).datepicker({ dateFormat: 'dd-M-yy'});
$(".datepicker").mask("99-aaa-9999");

$(".datepicker").blur(function(){
    var date1 = $(this).val(); 
    if(date1 != ""){
    var validate = IsValidDate(date1);
    if(!validate ){
        alert("Invalid Date formart, Date Format : dd-MMM-yyyy");
        $(this).val("");}}
});

function IsValidDate(myDate) {
                var filter = /^([012]?\d|3[01])-([Jj][Aa][Nn]|[Ff][Ee][bB]|[Mm][Aa][Rr]|[Aa][Pp][Rr]|[Mm][Aa][Yy]|[Jj][Uu][Nn]|[Jj][u]l|[aA][Uu][gG]|[Ss][eE][pP]|[oO][Cc]|[Nn][oO][Vv]|[Dd][Ee][Cc])-(19|20)\d\d$/
                                return filter.test(myDate);
            }

Answer 1

Use the “onselect” of the datepicker as a preferred way over “blur”:

$( ".datepicker" ).datepicker({ dateFormat: 'dd-M-yy', onSelect: function(date) { 
        var validate = IsValidDate(date);

        if(!validate)
        {
            alert("Invalid Date formart, Date Format : dd-MMM-yyyy");
            $(this).val("");
        }
}});