Question

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 reach out.

Here is my code:

function compare() {
 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 momentjs
    var diff = Math.abs(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 => 14) {
      $("#status").addClass('redBg');
    } else if (7 < diff =< 9) {
      $("#status").addClass('greenBg');
    } else if(diff >= 6) {
      $("#status").addClass('yellowBg');
    }
  } else {
    $("#status").addClass('yellowBg');
  }
    
    });

.greenBg {
    background: green;
}

.yellowBg {
    background: yellow;
}

.redBg {
    background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<body>
    <input type="text" id="date1" onchange=/>
<input type="text" id="date2" onchange='compare()'/>
<input  readonly type="text" id="status"/>
</body>
</html>

what is the mistake I have made?

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

function compare() {

  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 momentjs
    var 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');
    } else if (diff > 4) {
      $("#status").addClass('greenBg');
    } else {
      $("#status").addClass('yellowBg');
    }
  } else {
    $("#status").addClass('yellowBg');
  }
}

.greenBg {
  background: green;
}

.yellowBg {
  background: yellow;
}

.redBg {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.js"></script>
<html>

<body>
  <input type="text" id="date1" />
  <input type="text" id="date2" />
  <input type="text" id="status" />
  <input type="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:

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

Answer 2

你的代码段包含jquery，只需获得这样的值，$("#date1").val()

通过单独指定使用日期的通用格式，

＆＃13;

function compare() {    
    $("#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');
    }
    else if(4 < diff)
    {
        $("#status").addClass('greenBg');
    }
    else if(diff <= 4)
    {
        $("#status").addClass('yellowBg');
    }
}

＆＃13;

.greenBg {
    background: green;
}

.yellowBg {
    background: yellow;
}

.redBg {
    background: red;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<body>
<input type="text" id="date1"/>
<input type="text" id="date2"/>
<input type="text" id="status"/>
<input type="button" id="click" value="check" onclick="compare(this)">
</body>
</html>

＆＃13;

Answer 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

User Input Date Comparison in Javascript and moment.js

3 个答案: