simple web app works on android but doesn't work on safari

Question

I made a simple web app to use at work which takes in a specific date and returns a date X number of days in the future. Works perfect on android. Safari seems to not be taking in the input values best I can figure. Safari will only return undefined NaN. The HTML checks out on the W3C validator. I also tried 'use strict' and let vs const for variables. I'm now clueless and tired of banging my head.

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

I know Safari has problems with the `Date.getDate()`: [here](https://stackoverflow.com/questions/21883699/safari-javascript-date-nan-issue-yyyy-mm-dd-hhmmss) — yaakov, Aug 16 '17 at 05:40

Vega · Answer 1 · 2017-08-16T06:45:05.937

0

Your code is not working because Safari is more strict regarding date format. You need to put a valid format. To test, replace

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

with

const lastFillDate = new Date(Date());

and it will work.

Or Enter "2017-09-01" and will work too.

edited Aug 16 '17 at 06:45

answered Aug 16 '17 at 06:37

Vega

27,856
27
95
103

the YYYY-MM-DD format worked but not when I changed the code to what you suggested. thank you for your help – user3393940 Aug 16 '17 at 15:11

score 0 · Accepted Answer · answered Aug 16 '17 at 06:54

It's better to keep your date string in ISO 8601 format (e.g. "2017-08-16") while creating a Date object with a date string like:

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

Because there are inconsistencies across browsers that you won't expect.

In fact, you'll get an Invalid Date while you're trying to create a Date object from a string like "8-16-17" in Safari.

(You can also find how new Date(dateString) works from here)

Meanwhile, DateTime manipulating is a disaster in JavaScript; I would recommend using library like moment.js (https://momentjs.com/) so that you could write your code in an elegant way, for example:

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

So that you don't need to handle those existing JavaScript problems on your own.

simple web app works on android but doesn't work on safari

2 Answers2