Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery / Momentjs

User Input Date Comparison In Javascript And Moment.js

Post a Comment
I'm trying to compare two user input dates which is not related to the current or today's date with moment.js. I want to display the color based on the date difference.Help me reac

Solution 1:

You should get the values with

document.getElementById('date1').value

not with

"document.getElementById'date1'"

the code should be:

var firstDate = moment(document.getElementById('date1').value, "MM-DD-YYYY");
var secondDate = moment(document.getElementById('date2').value, "MM-DD-YYYY");

or better 

var firstDate = moment($('$date1').val(), "MM-DD-YYYY");
var secondDate = moment($('$date2').val(), "MM-DD-YYYY");

Edit

To make your code work, it needs to be like this:

functioncompare() {

  var firstDate = moment($("#date1").val(), "MM-DD-YYYY");
  var secondDate = moment($("#date2").val(), "MM-DD-YYYY");

  console.log(firstDate.inspect(), secondDate.inspect());

  if (firstDate.isValid() && secondDate.isValid()) {
    // you need a validation before using diff function of momentjsvar diff = firstDate.diff(secondDate, 'days');
    console.log(diff);
    // you also need to remove all classes before adding new class
    $("#status").removeClass("redBg").removeClass("greenBg").removeClass("yellowBg");
    if (diff > 7) {
      $("#status").addClass('redBg');
    } elseif (diff > 4) {
      $("#status").addClass('greenBg');
    } else {
      $("#status").addClass('yellowBg');
    }
  } else {
    $("#status").addClass('yellowBg');
  }
}
.greenBg {
  background: green;
}

.yellowBg {
  background: yellow;
}

.redBg {
  background: red;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.js"></script><html><body><inputtype="text"id="date1" /><inputtype="text"id="date2" /><inputtype="text"id="status" /><inputtype="button"id="click"value="check"onclick="compare()"></body></html>

Added a few debug statements to make you understand the code.

Further edit:

without the button, you can use the input or change events of the textboxes:

<inputtype="text"id="date1" onchange='compare()' />
<inputtype="text"id="date2" onchange='compare()' />

Solution 2:

your snippet contains, jquery, simply get value like this, $("#date1").val()

use common format for date by assigning separately,

functioncompare() {    
    $("#status").removeClass('redBg greenBg yellowBg');
    var dateFormat = "MM-DD-YYYY";    
    var firstDate = moment($("#date1").val(),dateFormat);


    var secondDate = moment($("#date2").val(),dateFormat);

    var diff = firstDate.diff(secondDate, 'days');
    console.log('s',diff);
    if(7 < diff)
    {
         $("#status").addClass('redBg');
    }
    elseif(4 < diff)
    {
        $("#status").addClass('greenBg');
    }
    elseif(diff <= 4)
    {
        $("#status").addClass('yellowBg');
    }
}
.greenBg {
    background: green;
}

.yellowBg {
    background: yellow;
}

.redBg {
    background: red;
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><html><body><inputtype="text"id="date1"/><inputtype="text"id="date2"/><inputtype="text"id="status"/><inputtype="button"id="click"value="check"onclick="compare(this)"></body></html>

Solution 3:

what you do wrong is on onclick=function()

you cannot assign a non-named function in onclick that way

if you want to attach the function without naming it, you should consider addEventListener or using jQuery .on('click', function(){}) way

http://api.jquery.com/on/

update:

after your update, your problem is that you are always checking for positive values. moment diff will result negative values when:

d1.diff(d2)

and d1 is earlier than d2

therefore you need to Math.abs() it first

Post a Comment for "User Input Date Comparison In Javascript And Moment.js"