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>
2 answers
solution1
0 2017-08-16 06:37:10
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.
solution2
0 ACCPTED 2017-08-16 06:54:48
It's better to keep your date string in ISO 8601 format (eg "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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.