Javascript和moment.js中的用户输入日期比较 [英] User Input Date Comparison in Javascript and moment.js
本文介绍了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（））{//在使用momentjs的diff函数之前需要进行验证var diff = Math.abs（firstDate.diff（secondDate，'days'））;的console.log（差异）; //你还需要在添加新类之前删除所有的类$（＃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>< /脚本>< HTML><身体GT; < input type =textid =date1onchange = />< input type =textid =date2onchange ='compare（）'/>< input readonly type =text
$ b
$ b
我犯了什么错误？
解决方案
您应该使用
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）;
编辑
为了使您的代码正常工作，它需要如下所示：
.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 =textid =date1/> < input type =textid =date2/> < input type =textid =status/> < / body>< / html>< input type =buttonid =clickvalue =checkonclick =compare >
添加了一些调试语句，使您能够理解代码。
进一步编辑：
没有按钮，您可以使用
输入或更改文本框的事件：
<输入类型=textid =date1onchange ='compare（）'/>
< input type =textid =date2onchange ='compare（）'/>
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?
解决方案You should get the values with
document.getElementById('date1').valuenot 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
inputorchangeevents of the textboxes:<input type="text" id="date1" onchange='compare()' /> <input type="text" id="date2" onchange='compare()' />
这篇关于Javascript和moment.js中的用户输入日期比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
