Question

我制作了一个简单的网络应用程序，用于工作，该工具接收特定日期并返回日期X天数。在android上运行完美。 Safari似乎没有考虑到我能想到的最佳输入值。 Safari只会返回未定义的NaN。 HTML检查W3C验证器。我也试过'use strict'并让vs const表示变量。我现在无能为力，厌倦了敲打我的脑袋。

<head>
    <style>
        body {
            background-color: lightblue;
            text-align: center;
        }

        button {
            margin: 50px 0 25px;
        }
    </style>
</head>
<body>
    <div>
        <h3>Welcome to the</h3>
        <h1>Ko-culator</h1>
    </div>
    <div>
        <p>Enter last fill / pick up date:</p>
        <input type="text" id="lastFillDate" placeholder="M-D-YY" style="text-align: center">
        <p>Enter day supply:</p>
        <input type="text" id="daySupply" placeholder="30, 60, etc" style="text-align: center">
    </div>
    <div>
        <button type="submit" onClick="getNextFill()">Next Fill Date</button>
    </div>
    <div>
        <p class="date-due"></p>
    </div>

    <script>
        function getNextFill() {
            const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            const lastFillDate = new Date(document.querySelector('#lastFillDate').value);
            const daySupply = document.querySelector('#daySupply').value;
            const dayOfMonth = lastFillDate.getDate();
            lastFillDate.setDate(dayOfMonth + Number.parseInt(daySupply));
            const nextFillDate = days[lastFillDate.getDay()] + " " + (lastFillDate.getMonth() + 1) + "-" + lastFillDate.getDate() + "-" + lastFillDate.getFullYear();
            document.querySelector('.date-due').innerHTML = 'Next fill is due on: <br/><br/>' + nextFillDate;
        };
    </script>
</body>

Answer 1

您的代码无效，因为Safari对日期格式更严格。你需要放一个有效的格式。要测试，请替换

const lastFillDate = new Date(document.querySelector('#lastFillDate').value);

带

const lastFillDate = new Date(Date());

它会起作用。

或输入“2017-09-01”也可以。

Answer 2

最好在创建具有日期字符串的Date对象时将日期字符串保持为ISO 8601格式（例如“2017-08-16”）：

new Date("2017-08-16");

因为您不希望浏览器之间存在不一致。

实际上，当您尝试从Safari中的字符串“8-16-17”创建Date对象时，您将获得无效日期。

（您还可以从here找到新日期（dateString）的工作方式）

同时，DateTime操纵是a disaster in JavaScript;我建议使用像moment.js（https://momentjs.com/）这样的库，这样你就可以用优雅的方式编写代码，例如：

// Create a date in specific date format
var date = moment("12-25-2017", "MM-DD-YYYY");

// Adding N days
date.add(10, 'days');  // Now it's 2018-01-04

// Output with custom format:
console.log(date.format("MM-DD-YY")); // You'll get: 01-04-18

这样您就不需要自己处理那些现有的JavaScript问题了。

简单的web应用程序适用于Android但不适用于safari

2 个答案: