使用提交按钮减去两个日期

Question

我在减去两个日期时遇到问题。这一切都始于两个输入。一个是日期，一个是提交按钮。在段落 #ekran 上，它需要显示 datePicked 是否低于今天的日期。它将表明我们需要在未来选择某个日期。否则它将计算今天的日期和我们选择的某个日期之间的差异。

当我喜欢这个时，它会说 NaN。我知道我在某个地方搞砸了，但我不知道它在哪里。可能在 var d = newDate() 需要正确设置日期格式。还是我错了？帮帮我。

p.s。需要使用 eventListener 以 DOM lvl 2 方式完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="date">
    <input type="submit" value="submit">

    <p id="ekran"></p>


    <script>
     var button = document.querySelector("[type=submit]").addEventListener('click', racunaj);

     function racunaj() {
        var d = new Date();
        d.setDate(30,9,2018);
        var datePicked = document.querySelector("[type=date]").value;

        var diff = document.getElementById("ekran").innerHTML = datePicked;




        if (datePicked< d) {
            "The Picked date need to be bigger then todays date";
        } else {
            return diff;
        }
     }
     </script>
</body>
</html>

Answer 1

您可以像这样更改您的代码（这是我之前的回答，我将其总结为增加与您的代码的相似性）：

 window.onload=function(){
    document.querySelector("[type='submit']").addEventListener('click', racunaj); 
   function racunaj() {
        var d = new Date();
        d.setDate(30,9,2018);
        var datePicked = new Date(document.querySelector("[type=date]").value); 
        var diff = datePicked.getTime()-d.getTime();
        document.getElementById("ekran").innerHTML=diff<0 ? "The Picked date need to be bigger then todays date" : diff +" (days: "+(diff/1000/60/60/24).toFixed(2)+")";
        return diff;
     }
}

您可以查看结果online!

Answer 2

如果你想比较某样东西是多还是少，你必须先让它们成为同一类型。

A javascript 日期对象有一个名为 "getTime()" 的内置函数，可用于将日期转换为数字。一旦你有两个数字，就很容易比较这两个数字。

我重写了您的脚本来证明这一点。

    var button = document.querySelector("[type=submit]").addEventListener('click', racunaj);

     function racunaj() {
//       first I make the two variables into a number that can be compared

       var currentTimeAndDate = new Date().getTime();
        var datePicked = new Date(document.getElementById("myDate").value).getTime();

// as you see on the console, they are now two numbers that can be compared.      

       console.log(datePicked, currentTimeAndDate)

//then you just do your logic and output different stuff. 

       if(datePicked < currentTimeAndDate){
       var diff = document.getElementById("ekran").innerHTML = "you chose past" 
      }
       else if(datePicked > currentTimeAndDate){
       var diff = document.getElementById("ekran").innerHTML = "you chose future"          
       }
       else{
        var diff = document.getElementById("ekran").innerHTML = "you did not choose" 
       }
     }

这是一个代码笔： https://codepen.io/anon/pen/qJEGme?editors=1011

使用提交按钮减去两个日期

Subtracting two dates with a submit button

javascript

date

event-listener

subtraction