Date formating and comparison Javascript

Question

here I would like to make a comparison between current date to date where inputted.

<script type="text/javascript">
    $(document).ready(function(){
        $("#date").change(function(){
            var realDate = new Date();
            var startDate = new Date($('#date').val());
            if (realDate >= startDate) {
                $('#infobros').removeClass('hidden');
            }else{
                $('#infobros').addClass('hidden');
            }
        });
    });
function validateForm(){
    var realDate = new Date();
    var startDate = new Date($('#date').val());

    if (realDate >= startDate){
      alert('Please Change your date Start');
      $('#date').focus();
      return false;
    }
  } 
</script>

in there i want to make my id #infobors remove class hidden when i input startDate its to low more than my realDate or if startDate same or more than realDate.

but, now if I input the same date to the current date #infobros still performing.

btw: my format startDate = YYYY-MM-DD

but i dont know the format of my realDate

I hope someone can help me, and make my script is work..

btw : this my format realDate :

can someone help me change to : YYYY-MM-DD

`alert(realDate)` and see the format of your realDate and to compare date try this http://stackoverflow.com/questions/3004178/how-to-compare-two-date-values-with-jquery — caldera.sac, Aug 20 '16 at 07:57
check your dates in console. `console.log(realDate, ' realDate'); console.log(startDate, ' startDate'); console.log(realDate >= startDate,' is ture?' );` — Grund, Aug 20 '16 at 08:07
ahh, oke i get know my format realdate, can help me change to ` YYYY-MM-DD` ? — APSB, Aug 20 '16 at 08:16
realDate is javacript Date object. and your startDate is valid Date object to? http://www.w3schools.com/jsref/jsref_obj_date.asp — Grund, Aug 20 '16 at 08:25
realDate is ok because it is new Date(), so comparision to it is right, problem could we only with startDate and input value, check my answer — Maciej Sikora, Aug 20 '16 at 08:32

score 0 · Answer 1 · answered Aug 20 '16 at 08:03

Here is a dateUtility function I wrote. I know there are holes in it because its surrounded by other code but it gives you a lot of what you need. It even takes care of leap years and 5 international date patterns!

function setDateComponents(regularExpressionResultsArray){
    if ( this.dateUtilDatePattern == "M/d/yyyy" || this.dateUtilDatePattern == "MM/dd/yyyy" ) {
        this.month = parseInt( eliminateLeadingZero(regularExpressionResultsArray[ 1 ]) ) -1;
        this.day =  parseInt( eliminateLeadingZero(regularExpressionResultsArray[ 2 ]) );
        this.year = parseInt( regularExpressionResultsArray[ 3 ] );
        return;
    }

    if ( this.dateUtilDatePattern == "d/M/yyyy" || this.dateUtilDatePattern == "dd/MM/yyyy" ) {
        this.day = parseInt( eliminateLeadingZero(regularExpressionResultsArray[ 1 ]) );
        this.month =  parseInt( eliminateLeadingZero(regularExpressionResultsArray[ 2 ]) ) - 1;
        this.year = parseInt( regularExpressionResultsArray[ 3 ] );
        return;
    }

    if ( this.dateUtilDatePattern == "d.M.yyyy" || this.dateUtilDatePattern == "dd.MM.yyyy" ) {
        this.day = parseInt( eliminateLeadingZero(regularExpressionResultsArray[ 1 ]) );
        this.month =  parseInt( eliminateLeadingZero(regularExpressionResultsArray[ 2 ]) ) - 1;
        this.year = parseInt( regularExpressionResultsArray[ 3 ] );
        return;
    }

    alert( "Date utility.  Date pattern not implemented " + this.dateUtilDatePattern );
}

function defineRegularExpression(){
    if ( ( this.dateUtilDatePattern == "M/d/yyyy" ) ||
         ( this.dateUtilDatePattern == "d/M/yyyy" ) ||
         ( this.dateUtilDatePattern == "dd/MM/yyyy" ) ||
         ( this.dateUtilDatePattern == "MM/dd/yyyy" ) ) {
        this.separator = "/";
        this.regExp = /^([0-9]{1,2})\/([0-9]{1,2})\/(\d\d\d\d)$/;
        return;
    }
    if ( ( this.dateUtilDatePattern == "d.M.yyyy" ) ||
         ( this.dateUtilDatePattern == "dd.MM.yyyy" ) ) {
        this.separator = ".";
        this.regExp = /^([0-9]{1,2})\.([0-9]{1,2})\.(\d\d\d\d)$/;
        return;
    }

    alert( "Date utility.  Date pattern not implemented " + this.dateUtilDatePattern );
}


function generateDateObject(dateAsString){

    // assert if the pattern matches
    if( dateAsString.search( this.regExp ) == -1 ){
        throw new DateUtilityException( this.ERROR_NOT_A_DATE );
    }

    // parse the string
    var regularExpressionResultsArray = this.regExp.exec( dateAsString );

    // set date components for datePattern
    this.setDateComponents(regularExpressionResultsArray);
    // Create the date object, and validate numbers are reasonable  
    if( (-1 < this.month) && (this.month < 12) ) {
        if( (0 < this.day) && (this.day < 32) ) {
            var goodDate = performThoroughComponentAnalysis(this.month,this.day,this.year);
            if (goodDate) {                 
                this.dateObject = new Date( new Number( this.year ), new Number( this.month ), new Number( this.day ) );                                        
                // standardize the format
                this.generateStandardizedDateAsStringAndDateComponents();
                return true;
            }
        }
    }
    throw new DateUtilityException( this.ERROR_NOT_A_DATE );
}

function performThoroughComponentAnalysis(month,day,year) {
    var monthB1 = month + 1; //Use month range 1-12

    // FEB
    if (monthB1 == 2) {
        // determine if leap year
        var div4 = false;
        var div100 = false;
        var div400 = false;
        var leapyear = false;
        if ((year % 4) == 0) {
            div4 = true;
        }            
        if ((year % 100) == 0) {
            div100 = true;
        }
        if ((year % 400) == 0) {
            div400 = true;
        }

        if (div4) {
            leapyear=true;
            if ((div100)&&(!div400)) {
                leapyear=false;
            }
        }

        if (leapyear) {
            if (day > 29) {
                return false;
            }
        } 
        else { 
            if (day > 28) {
                return false;
            }
        }
    }

    // 31 day months    
    if ( (monthB1 == 1)||(monthB1 == 3)||(monthB1 == 5)||(monthB1 == 7)||(monthB1 == 8)||(monthB1 == 10)||(monthB1 == 12) ) {
        if (day > 31) {
            return false;
        }
    }

    // 30 day months
    if ( (monthB1 == 4)||(monthB1 == 6)||(monthB1 == 9)||(monthB1 == 11) ) {
        if (day > 30) {
            return false;
        }
    }
    return true;
}

btw. Users out in the world won't be entering YYYY-MM-DD. I recommend using one of the 5 in the code. — javaMoca, Aug 20 '16 at 08:12
its oke, in there i use datepicker so they only need to select it, but thanks for suggestion — APSB, Aug 20 '16 at 08:17
No no no, if we have correct date format then Date object comparission will work without such combinations. If we need something better then use http://momentjs.com/ — Maciej Sikora, Aug 20 '16 at 08:34

score 0 · Accepted Answer · answered Aug 20 '16 at 08:25

0

Your date comparission should work if input date is correct, better to use some input widget for date or input type="date". I created working example by changing Your code.

/**
 *Function checks date is in past or future 
 */
function checkDate(){

  var realDate = new Date();
  var startDate = new Date($('#date').val());
  if (realDate >= startDate) {
      $('#infobros').removeClass('hidden');
      return false;//date in past
  }else{
      $('#infobros').addClass('hidden');
      return true;//date in future
  }
}

function validateForm(e){

    //use it on submit
    if (checkDate()){
      return true; //here date is in future so ok
    }
    else
        {
          e.preventDefault(); //stop submitting form
          alert("You date should be future date");
          return false;
        }
} 


$(document).ready(function(){
    $("#date").change(function(){

        checkDate();//use it on change

    });

    $("form").submit(validateForm);//set on submit event

    checkDate();//use it after start of page
});

Here is working code in plunker - https://plnkr.co/edit/fGGgHSiYcG1gqugLRToX?p=preview.

answered Aug 20 '16 at 08:25

Maciej Sikora

19,374
4
49
50

ahh oke, but how about with the alert ? its should not pop up when i input same date – APSB Aug 20 '16 at 08:33
You had in Your code realDate >= startDate so it means also ==. You want to alert not showing when dates are equals? If so i will change code, but i must know that it is what You need. – Maciej Sikora Aug 20 '16 at 08:36
To not show alert on the same dates change >= to > in if statemant – Maciej Sikora Aug 20 '16 at 08:41
@AdamProjo helped? – Maciej Sikora Aug 20 '16 at 08:54
Thanks its help me ^^ – APSB Aug 22 '16 at 07:01

score 0 · Answer 3 · answered Aug 20 '16 at 13:19

0

If all you are asking for is how to compare dates then its

if( realDate.getTime() >= startDate.getTime() ) {
    $('#infobros').removeClass('hidden');
}else{
    $('#infobros').addClass('hidden');
}

answered Aug 20 '16 at 13:19

javaMoca

175
7

Date formating and comparison Javascript

3 Answers3