Adding one more event in JQuery date picker the current adding functionalities not working

Question

Currently working on calculating the year using jquery. This was working perfectly as expected but I want to add one more function into it. If the user enters a wrong value for example 121212 it should say "You have entered the wrong format. Kindly enter the correct format".

 $('.startDate').change(function(event) {
     var txtVal6 = $(this).val();
     //alert("check what" + txtVal);
     if (isDate5(txtVal6)) {
             $(this).removeClass("errRed");
             event.stopImmediatePropagation();
     } else {
             alert('Kindly enter date in valid format');
             $(this).addClass("errRed").val("");
             event.stopImmediatePropagation();
     }
  });

  function isDate5(startDate) {
     var currVal6 = startDate;
     if (currVal6 == '') return false;

     var rxDatePattern6 = /^\d{2}[./-]\d{2}[./-]\d{4}$/; //Declare Regex
     var dtArray6 = currVal6.match(rxDatePattern6); // is format OK?

     if (dtArray6 == null) return false;

     //Checks for mm/dd/yyyy format.
     dtMonth6 = dtArray6[3];
     dtDay6 = dtArray6[5];
     dtYear6 = dtArray6[1];

     if (dtMonth6 < 1 || dtMonth6 > 12) return false;
     else if (dtDay6 < 1 || dtDay6 > 31) return false;
     else if ((dtMonth6 == 4 || dtMonth6 == 6 || dtMonth6 == 9 || dtMonth6 == 11) && dtDay6 == 31) return false;
     else if (dtMonth6 == 2) {
             var isleap = (dtArray6 % 4 == 0 && (dtArray6 % 100 != 0 || dtArray6 % 400 == 0));
             if (dtDay6 > 29 || (dtDay6 == 29 && !isleap)) return false;
     }
     return true;
 }

 $('.endDate').change(function(event) {
     var txtVal7 = $(this).val();
     //alert("check what" + txtVal);
     if (isDate6(txtVal7)) {                
             $(this).removeClass("errRed");
             event.stopImmediatePropagation();
     } else {
             alert('Kindly enter date in valid format');
             $(this).addClass("errRed").val("");
             event.stopImmediatePropagation();
     }
 });

 function isDate6(endDate) {
     var currVal7 = endDate;
     if (currVal7 == '') return false;

     var rxDatePattern7 = /^\d{2}[./-]\d{2}[./-]\d{4}$/; //Declare Regex
     var dtArray7 = currVal7.match(rxDatePattern7); // is format OK?

     if (dtArray7 == null) return false;

     //Checks for mm/dd/yyyy format.
     dtMonth7 = dtArray7[3];
     dtDay7 = dtArray7[5];
     dtYear7 = dtArray7[1];

     if (dtMonth7 < 1 || dtMonth7 > 12) return false;
     else if (dtDay7 < 1 || dtDay7 > 31) return false;
     else if ((dtMonth7 == 4 || dtMonth7 == 6 || dtMonth7 == 9 || dtMonth7 == 11) && dtDay7 == 31) return false;
     else if (dtMonth7 == 2) {
             var isleap = (dtArray7 % 4 == 0 && (dtArray7 % 100 != 0 || dtArray7 % 400 == 0));
             if (dtDay7 > 29 || (dtDay7 == 29 && !isleap)) return false;
     }
     return true;
  }

With this code if I enter the value 12112 in the text field to date field it says kindly enter the correct value but if i enter the correct date value in from and to field the calculating of the years is not working.

Thanks in advance

Here is the fiddle link

CapitanFindus · Accepted Answer

Don't know why you just don't use Javascript built in Date object, anyway, I did some changes inside your script, starting from RegExp and removing some functions which, imho, weren't useful.
This is what I've done:

var dateRegex=new RegExp("^[0-9]{2}-[0-9]{2}-[0-9]{4}$");
$(document).on('change', ".datepicker", function() {
    // No need for each() part, you already know which one is the start and which one is the end
    if($(this).val()){
        if(!dateRegex.test($(this).val())){
            alert('Kindly enter date in valid format');
            $(this).val('');
            return false;
        }
    }
    if($(".startDate").val() && $(".endDate").val()){
        var dateStart = $(".datepicker.startDate").val(),
            dateEnd = $(".datepicker.endDate").val();
            // No need even for array, you just get datepicker value like this and test it
            var dateStartArray=dateStart.split('-'),dateEndArray=dateEnd.split('-');
            var fromdate=new Date(dateStartArray[2],dateStartArray[0]-1,dateStartArray[0]),
                todate=new Date(dateEndArray[2],dateEndArray[0]-1,dateEndArray[0]);
            // Creating date object with format YYYY-MM-GG ( taken from datepicker's split array )
            console.log(fromdate);
            console.log(todate);
            if(fromdate>todate){
                alert("To date should be greater than from date");
                return false;
            } else {
                var yearsDifference=todate.getFullYear()-fromdate.getFullYear();
                var monthsDifference=(todate.getMonth()+12*todate.getFullYear())-(fromdate.getMonth()+12*fromdate.getFullYear());
                $("#txt_expy").html(Math.floor(monthsDifference/12)+' Years');
                $("#txt_expm").html((monthsDifference%12)+' Months');
            }   
    } else {
        return false;   
    }
});

You can check this fiddle to see all the modifies I've done, see if this can help :)

Adding one more event in JQuery date picker the current adding functionalities not working

Answers (2)

Related Questions