Javascript和moment.js中的用户输入日期比较

我试图将两个与当前或今天的日期无关的用户输入日期与moment.js进行比较。 我想根据日期差异显示颜色。帮助我伸出援手。

这是我的代码：

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 == 6) { $("#status").addClass('yellowBg'); } } else { $("#status").addClass('yellowBg'); } }); 

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

我犯的错是什么？

Answer 1

你应该得到价值

 document.getElementById('date1').value 

没有

 "document.getElementById'date1'" 

代码应该是：

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

或更好

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

---

编辑

为了使您的代码有效，它需要像这样：

 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; } 

Answer 2

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

通过单独分配使用日期的通用格式，

 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'); } } 

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

Answer 3

你做错了是在onclick=function()

你不能以这种方式在onclick上分配一个非命名函数

如果你想在没有命名的情况下附加函数，你应该考虑使用addEventListener或者使用jQuery .on('click', function(){})方式

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

更新 ：

更新后，您的问题是您始终检查正值。 时刻差异将导致负值：

 d1.diff(d2) 

并且d1早于d2

因此，您首先需要Math.abs()