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

【问题标题】：User Input Date Comparison in Javascript and moment.jsJavascript 和 moment.js 中的用户输入日期比较
【发布时间】：2018-04-25 18:22:45
【问题描述】：

我正在尝试将与当前或今天的日期无关的两个用户输入日期与 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 =< 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>

我犯了什么错误？

【问题讨论】：

你可以为 firstDate 和 secondDate 变量记录控制台吗？

标签： javascript jquery html momentjs

【解决方案1】：

您的 sn-p 包含 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;
}

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

【讨论】：

您好，您检查了 sn-p。文本框只改变一次。请修复它@Mohideen
现在应该可以了。您在调用函数之前没有删除应用的类.. $("#status").removeClass('redBg greenBg yellowBg');立即查看
请看我的代码。我无法进行差异操作。帮帮我

【解决方案2】：

你做错了什么在onclick=function()

你不能这样在onclick 中分配一个未命名的函数

如果你想附加函数而不命名它，你应该考虑addEventListener或使用jQuery .on('click', function(){})方式

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

更新：

更新后，您的问题是您总是在检查正值。在以下情况下，moment diff 将产生负值：

d1.diff(d2)

并且d1 早于d2

因此你需要先Math.abs()它

【讨论】：

【解决方案3】：

你应该得到值

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

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

添加了一些调试语句，让您理解代码。

进一步编辑：

没有按钮，您可以使用文本框的input 或change 事件：

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

【讨论】：

您也可以使用 Math.abs 将负差转换为正。
谢谢塔哈。如果没有这个按钮，我还有一个问题如何像 ajax 一样进行比较。
您可以使用文本框的输入或更改事件来触发比较功能。
抱歉询问。你能举出或参考任何例子吗
请看我的代码。我在 Diff 中做了简单的修改，但它不起作用。你能解决吗