我试图将两个与当前或今天的日期无关的用户输入日期与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; }
我犯的错是什么?
你应该得到价值
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; }
你的代码片段包含,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; }
你做错了是在onclick=function()
你不能以这种方式在onclick
上分配一个非命名函数
如果你想在没有命名的情况下附加函数,你应该考虑使用addEventListener
或者使用jQuery .on('click', function(){})
方式
更新 :
更新后,您的问题是您始终检查正值。 时刻差异将导致负值:
d1.diff(d2)
并且d1
早于d2
因此,您首先需要Math.abs()
以上就是jQuery教程分享Javascript和moment.js中的用户输入日期比较相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/562039.html