0

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

15
  • You could try using Date.parse('mm/gg/yyyy') to check if it's a valid date or not, or you want to test only with regex? Commented Nov 17, 2015 at 18:07
  • @CapitanFindus thanks for the reply but i need to show an alert if i use date.parse can i use alert Commented Nov 17, 2015 at 18:08
  • actually i would like to test only with regexp i thought that would be easy :) Commented Nov 17, 2015 at 18:08
  • I would actually test by using Javascript date object, but if you want to use regex i'll do it using them. Could you please tell me what is the function that should return years difference? Commented Nov 17, 2015 at 18:16
  • if you see my js fiddle link i have some thing call $(document).on('change', ".datepicker", function () { var valid = true; $.each($('.datepicker'), function () { if ($(this).val() == "") { valid = false; return false; } }); if (valid) { Commented Nov 17, 2015 at 18:51

2 Answers 2

1

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 :)

Sign up to request clarification or add additional context in comments.

Comments

1
+50

Update code

var diffDays = 0;
    $(".cloned-row3").find(".datepicker").removeClass('hasDatepicker').datepicker({
        dateFormat: "mm-dd-yy",
        changeMonth: true,
        yearRange: "-100:+0",
        changeYear: true,
        maxDate: new Date(),
        showButtonPanel: false,
        beforeShow: function() {
            setTimeout(function() {
                $('.ui-datepicker').css('z-index', 99999999999999);

            }, 0);
        }

    });
    var count = 0;
    $(document).on("click", ".exp_add_button", function() {
        var $clone = $('.cloned-row3:eq(0)').clone(true, true);
        $clone.find('[id]').each(function() {
            this.id += 'someotherpart'+count;
        });
        $clone.find('.btn_more').after("<input type='button' class='btn_less1 selbtnless' id='buttonless' value='remove'/>")
        $clone.attr('id', "added" + (++count));
        $clone.find(".startDate").val('');
        $clone.find(".endDate").val('');
        /*$clone.find(".degree_Description").attr('disabled', true).val('');*/
        $clone.find("input.startDate").removeClass('hasDatepicker').removeData('datepicker')
            .unbind()
            .datepicker({
                dateFormat: "mm-dd-yy",
                changeMonth: true,
                yearRange: "-100:+0",
                changeYear: true,
                maxDate: new Date(),
                showButtonPanel: false,
                beforeShow: function() {
                    setTimeout(function() {
                        $('.ui-datepicker').css('z-index', 99999999999999);

                    }, 0);
                }
            });
        $clone.find("input.endDate")
            .removeClass('hasDatepicker')
            .removeData('datepicker')
            .unbind()
            .datepicker({
                dateFormat: "mm-dd-yy",
                changeMonth: true,
                yearRange: "-100:+0",
                changeYear: true,
                maxDate: new Date(),
                showButtonPanel: false,
                beforeShow: function() {
                    setTimeout(function() {
                        $('.ui-datepicker').css('z-index', 99999999999999);

                    }, 0);
                }
            });
        $(this).parents('.wrk_exp').after($clone);
    });
    $(document).on('click', ".btn_less1", function() {
        var len = $('.cloned-row3').length;
        if(len > 1) {


            var RemoveStartDate =  $(this).closest(".btn_less1").parent().parent().parent().find('.startDate ').val();
            var RemoveEndDate = $(this).closest(".btn_less1").parent().parent().parent().find('.endDate  ').val();

             if((RemoveStartDate!='')||(RemoveEndDate!='')){
             var dateStartArray=RemoveStartDate.split('-'),dateEndArray=RemoveEndDate.split('-');
                var fromdate=new Date(dateStartArray[2],dateStartArray[0]-1,dateStartArray[0]),
                    todate=new Date(dateEndArray[2],dateEndArray[0]-1,dateEndArray[0]);

            var yearsDifference=todate.getFullYear()-fromdate.getFullYear();
                    var monthsDifference=(todate.getMonth()+12*todate.getFullYear())-(fromdate.getMonth()+12*fromdate.getFullYear());

                  var PrevTotalYear = parseInt($("#txt_expy>span").text());   
                  var PrevTotalMonth = parseInt($("#txt_expm>span").text()); 


                $("#txt_expy>span").text('');
                $("#txt_expm>span").text('');

       PrevTotalYear = PrevTotalYear*12;  

          var CurTotalYear = Math.floor(((PrevTotalYear+PrevTotalMonth)-monthsDifference)/12);
          var CurTotalMonth =  (monthsDifference-PrevTotalMonth)%12;


        $("#txt_expy>span").text(CurTotalYear);
        $("#txt_expm>span").text(CurTotalMonth);
            $(this).closest(".btn_less1").parent().parent().parent().remove();
        }else{
            $(this).closest(".btn_less1").parent().parent().parent().remove();
        }
        }
    });
    $(document).on('change', ".datepicker", function() {
        // No need for each() part, you already know which one is the start and which one is the end
       dateRegex=new RegExp("^[0-9]{2}-[0-9]{2}-[0-9]{4}$");

         if($(this).hasClass('startDate')) {
             var dateStart = $(this).val();

              if(!dateRegex.test(dateStart)){
                alert('Kindly enter date in valid format');
                return false;
              }
              return false;
         }
         else if($(this).hasClass('endDate') && isNaN($(this).val())|| $(this).val()!='') {
             var dateEnd = $(this).val();
             if(!dateRegex.test(dateEnd)){
                alert('Kindly enter date in valid format');
                return false;
              }else{
                 dateStart = $(this).closest('.row').find('.startDate').val();
              }
         }else{
            return false;
         }

        if((dateStart!='')||(dateEnd!='')){

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

                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());

                  var PrevTotalYear = parseInt($("#txt_expy>span").text());   
                  var PrevTotalMonth = parseInt($("#txt_expm>span").text()); 


                $("#txt_expy>span").text('');
                $("#txt_expm>span").text('');

       PrevTotalYear = PrevTotalYear*12;  

    var CurTotalYear = Math.floor((monthsDifference+PrevTotalYear+PrevTotalMonth)/12);
      var CurTotalMonth =  (monthsDifference+PrevTotalMonth)%12;


       $("#txt_expy>span").text(CurTotalYear);
       $("#txt_expm>span").text(CurTotalMonth);
                }   
            }
         else {
            return false;   
        }



    });

fiddle link

1 Comment

but if you enter wrong format number in the first text field it was not showing any alert

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.