时间戳

首页 > 解决方案 > 为什么这个功能在 Safari 中不起作用？（在 Chrome 中工作正常）

javascript - 为什么这个功能在 Safari 中不起作用？（在 Chrome 中工作正常）

问题描述

我有一个简单的函数来计算 2 个选定日期之间的天数。谁能帮我解释为什么它目前只在 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>

标签： javascript

解决方案

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

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

编辑：

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

推荐阅读