Javascript date is invalid on iOS
JavascriptAndroidIosCordovaJavascript Problem Overview
I'm working on a Phonegap-based iOS app, which is already done for Android. The following lines are working fine for Android but not for iOS. Why?
var d = new Date("2015-12-31 00:00:00");
console.log(d.getDate() + '. ' + d.getMonth() + ' ' + d.getFullYear();
Result for Android:
31.11 2015
Result on iOS:
NaN. NaN NaN
Where is the difference coming from?
Javascript Solutions
Solution 1 - Javascript
Your date string is not in a format specified to work with new Date
. The only format in the spec is a simplified version of ISO-8601, added in ES5 (2009). Your string isn't in that format, but it's really close. It would also be easy to change it to a format that isn't in the spec, but is universally supported
Four options for you:
- Use the upcoming
Temporal
feature (it's now at Stage 3) - The specified format
- An unspecified format that's near-universally supported
- Parse it yourself
Temporal
feature
Use the upcoming The Temporal
proposal is at Stage 3 as of this update in August 2021. You can use it to parse your string, either treating it as UTC or as local time:
Treating the string as UTC:
// (Getting the polyfill)
const {Temporal} = temporal;
const dateString = "2015-12-31 00:00:00";
const instant = Temporal.Instant.from(dateString.replace(" ", "T") + "Z");
// Either use the Temporal.Instant directly:
console.log(instant.toLocaleString());
// ...or get a Date object:
const dt = new Date(instant.epochMilliseconds);
console.log(dt.toString());
<script src="https://unpkg.com/@js-temporal/polyfill/dist/index.umd.js"></script>
Or treating it as local time:
// (Getting the polyfill)
const {Temporal} = temporal;
const dateString = "2015-12-31 00:00:00";
console.log("Parsing as local time:");
const tz = Temporal.Now.timeZone();
const instant = tz.getInstantFor(dateString.replace(" ", "T"));
console.log(instant.toLocaleString());
const dt = new Date(instant.epochMilliseconds);
console.log(dt.toString());
<script src="https://unpkg.com/@js-temporal/polyfill/dist/index.umd.js"></script>
Temporal
doesn't have the problem mentioned below that the specified date/time string format historically had when no timezone was specified.
The specified format
If you change the space to a T
, you'll be in spec:
var dateString = "2015-12-31 00:00:00";
// Treats the string as local time -- BUT READ BELOW, this varied
var d = new Date(dateString.replace(" ", "T"));
console.log(d.toString());
(I'm assuming you're not actually using a string literal, hence the replace
call.)
For reliable timezone handling in old browsers, you'll also want to append a Z
(for GMT/UTC) or a timezone indicator (+
/-
HH:MM
), because the handling of strings without them was mis-specified in ES5, updated in ES2015, and then updated further in ES2016. Current versions of modern browsers follow the spec now, which says:
- If there's a time on the string but and no timezone indicator, parse the string in local time
- If there's no time on the string and no timezone indicator, parse the string in UTC
(ES5 said always default to UTC. ES2015 said always default to local time. ES2016 is where the current behavior was defined. It's been stable since.)
So it's best to include a timezone indicator, especially if you have to support older browsers. Note that it must be a Z
(UTC) or +
/-
HH:MM
; abbreviations like CST
are not allowed, as there's no standard for them. Here's a UTC example:
var dateString = "2015-12-31 00:00:00";
// Treat the string as UTC
var d = new Date(dateString.replace(" ", "T") + "Z");
console.log(d.toString());
An unspecified format that's near-universally supported
There's a seconnd format that isn't in the specification but is near-universally supported and has been for a long time: YYYY/MM/DD HH:MM:SS
, which is interpreted as local time. So:
var dateString = "2015-12-31 00:00:00";
// Treats the string as local time
var d = new Date(dateString.replace(/-/g, "/"));
console.log(d.toString());
Again, though, that's unspecified behavior, so caveat emptor. But it works in at least IE8+ (probably earlier), Chrome and anything else using the V8 JavaScript engine, Firefox, and Safari.
Parse it yourself
It's also easy to parse that string yourself. Using ES2020+ features:
function parseDate(str) {
const [dateparts, timeparts] = str.split(" ");
const [year, month, day] = dateparts.split("-");
const [hours = 0, minutes = 0, seconds = 0] = timeparts?.split(":") ?? [];
// Treats the string as UTC, but you can remove the `Date.UTC` part and use
// `new Date` directly to treat the string as local time
return new Date(Date.UTC(+year, +month - 1, +day, +hours, +minutes, +seconds));
}
const dateString = "2015-12-31 00:00:00";
const d = parseDate(dateString);
console.log(d.toString());
Or with only ES5-level features (since the question is from 2015):
function parseDate(str) {
var parts = str.split(" ");
var dateparts = parts[0].split("-");
var timeparts = (parts[1] || "").split(":");
var year = +dateparts[0];
var month = +dateparts[1];
var day = +dateparts[2];
var hours = timeparts[0] ? +timeparts[0] : 0;
var minutes = timeparts[1] ? +timeparts[1] : 0;
var seconds = timeparts[2] ? +timeparts[2] : 0;
// Treats the string as UTC, but you can remove the `Date.UTC` part and use
// `new Date` directly to treat the string as local time
return new Date(Date.UTC(year, month - 1, day, hours, minutes, seconds));
}
var dateString = "2015-12-31 00:00:00";
var d = parseDate(dateString);
console.log(d.toString());
Solution 2 - Javascript
I can't tell you why. Maybe because iOS doesn't support the Javascript Date function as well as Android, or support a different format?
But I can give you a workaround:
var s = "2015-12-31 00:00:00".split(" ")[0].split("-"),
d = new Date( s[0], s[1], s[2], 0, 0, 0 );
console.log(d);
var s = "2015-12-31 00:00:00".replace(/[ :]/g, "-").split("-"),
d = new Date( s[0], s[1], s[2], s[3], s[4], s[5] );
console.log(d);
Solution 3 - Javascript
A solution that works for both IOS and Android, and avoid string manipulation when it isn't required is
let fullDate = "1991-03-29 00:00:00";
let date = new Date(fullDate);
// In case its IOS, parse the fulldate parts and re-create the date object.
if(Number.isNaN(date.getMonth())) {
let arr = fullDate.split(/[- :]/);
date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
}
Solution 4 - Javascript
If anybody is still looking for it.
works for me in IE, Safari, IOS-FF, IOS-Safari ... etc.
getIOSSaveDateObj = function(dateString){
if(dateString.indexOf('-') > 0){
var arr = dateString.split(/[- :]/);
var date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
}else{
var arr = dateString.split(/[. :]/);
var date = new Date(arr[2], arr[1]-1, arr[0], arr[3], arr[4], arr[5]);
}
return date;
}
Solution 5 - Javascript
I had such a hard time trying to solve this, i finally went for an easier solution and used moment.js. Not much you need to do just declare the dates and works in every device.
Solution 6 - Javascript
Try with var d = new Date("2015/12/31 00:00:00");
Works for me.
Solution 7 - Javascript
Also
var d = new Date("2015/12/31T00:00:00");
works for me :)
Thanks @dda