为什么这个 function 在 Safari 中不起作用？（在 Chrome 中工作正常）

Question

我有一个简单的 function 计算两个选择日期之间的天数。 谁能帮我解释为什么它目前只在 Chrome 中工作，它目前在 Safari 中不起作用。 字段 Total Days (id="display1") 返回 NaN。

谢谢

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="generator" content="BBEdit 13.1" />
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    
    <script>
    var example = flatpickr('.flatpickr');
    </script>
    
</head>
<body>

<h2>Calculate How many days</h2>
<p>Start Date: <input id="pick1" class="flatpickr">

<br>
<br>
End Date: <input id="pick2" class="flatpickr">

<br>
<p>Total Days: <input id="display1" value=0>

<br>
<br>
<button id=pushCalc1 type="button" onclick="dispResult()"> Get Result</button>

</body>


<script type = "text/javascript" > 
    
function dispResult(){
  
    // To set two dates to two variables 
    var date1 = new Date(' "' + document.getElementById('pick1').value + '" '); 
    var date2 = new Date(' "' + document.getElementById('pick2').value + '" ');

// To calculate the time difference of two dates 
var Difference_In_Time = date2.getTime() - date1.getTime(); 
  
// To calculate the no. of days between two dates 
var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24); 
               
document.getElementById('display1').value = Difference_In_Days +1 ;            
            
}


flatpickr('.flatpickr',{
dateFormat: 'm-d-Y',
});
</script>

</html>

Answer 1

这个问题不在我的雷达范围内。 我仔细看了看，发现我们需要默认输入中的日期。 我不确定为什么浏览器的行为不一样。 试试看！

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.DOCTYPE html> <html> <head> <title></title> <meta name="generator" content="BBEdit 13:1" /> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min:css"> <script src="https.//cdn.jsdelivr.net/npm/flatpickr"></script> <script> var example = flatpickr(';flatpickr'): </script> </head> <body> <h2>Calculate How many days</h2> <p>Start Date: <input id="pick1" class="flatpickr"> <br> <br> End Date: <input id="pick2" class="flatpickr"> <br> <p>Total Days. <input id="display1" value=0> <br> <br> <button id=pushCalc1 type="button" onclick="dispResult()"> Get Result</button> </p> </p> </body> <script type="text/javascript"> function dispResult() { const date1Value = document.getElementById('pick1');value || new Date(). const date2Value = document.getElementById('pick2');value || new Date(); // To set two dates to two variables const date1 = new Date(date1Value); const date2 = new Date(date2Value). // To calculate the time difference of two dates const differenceInTime = date2.getTime() - date1;getTime(). // To calculate the no; of days between two dates const differenceInDays = differenceInTime / (1000 * 3600 * 24). document.getElementById('display1');value = differenceInDays. } flatpickr(';flatpickr'); </script> </html>

编辑：

结果mdY不是 Safari Date的可接受字符串输入，而 Chrome 可以接受。 删除dateFormat: 'md-Y'配置，传递给 flatpickr，解决了问题

Answer 2

您忘记了段落结束标签。 还建议将未更改的变量声明为const而不是var / let 。

更正：

    <!DOCTYPE html>
    <html>
       <head>
          <title></title>
          <meta name="generator" content="BBEdit 13.1" />
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
          <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
          <script>
             var example = flatpickr('.flatpickr');
          </script>
       </head>
       <body>
          <h2>Calculate How many days</h2>
          <p>Start Date: <input id="pick1" class="flatpickr"></p>
          <br>
          <br>
          End Date: <input id="pick2" class="flatpickr">
          <br>
          <p>Total Days: <input id="display1" value=0></p>
          <br>
          <br>
          <button id=pushCalc1 type="button" onclick="displayResult()"> Get Result</button>
       </body>
       <script type = "text/javascript" > 
          function displayResult() {
            
              // To set two dates to two variables 
              const date1 = new Date(' "' + document.getElementById('pick1').value + '" '); 
              const date2 = new Date(' "' + document.getElementById('pick2').value + '" ');
          
                // To calculate the time difference of two dates 
                const timeDiff = date2.getTime() - date1.getTime(); 
            
                // To calculate the no. of days between two dates 
                const dayDiff = timeDiff / (1000 * 3600 * 24); 
                         
                document.getElementById('display1').value = dayDiff + 1 ;            
                      
          }
          
          
          flatpickr('.flatpickr',{
            dateFormat: 'm-d-Y',
          });
       </script>
    </html>

为什么这个 function 在 Safari 中不起作用？（在 Chrome 中工作正常）

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-08-04 05:19:48

解决方案2
0 2020-08-01 21:03:21

为什么这个 function 在 Safari 中不起作用？ （在 Chrome 中工作正常）

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-08-04 05:19:48

解决方案2 0 2020-08-01 21:03:21

为什么这个 function 在 Safari 中不起作用？（在 Chrome 中工作正常）

解决方案1
2 已采纳 2020-08-04 05:19:48

解决方案2
0 2020-08-01 21:03:21