IE 11 issue with JavaScript toLocaleDateString() formatting - javascript

I am using the JavaScript Date function toLocaleDateString() to format my date to look like 8/13/2014, but for some reason when I try to send this value via an API call by doing a JSON.stringify and then AJAXing the value, IE decides to change the actual value to be ?8?/?30?/?2014.. This obviously causes errors on the back end.
Why does IE do this and how can I fix it?

Looks like it's a bug that was introduced in IE 11. IE 11 uses Unicode chars, so what you see is U+200E 'LEFT-TO-RIGHT MARK'
What you can do as a temporary solution to fix this issue is to replace that char. Like this:
console.log((new Date()).toLocaleDateString().replace(/\u200E/g, ''));

You should check out the answer here:
ToLocaleDateString() changes in IE11
You shouldn't be using a function intended to format something for locale-specific human display and expect the output to be machine parsable. Any of the output of toLocaleString, toLocaleDateString, or toLocaleTimeString are meant for human-readable display only. (As Bergi clarified in comments, toString is also meant for human display, but ECMA §15.9.4.2 says it should round-trip)
Although the function returns a string, it's only human-readable and is never appropriate for machine parsing. I'm not 100% sure what encoding it is for IE, but although it looks like a string, underneath it uses a different encoding.
For date formatting, you may wish to use Moment.js, or just write your own formatting function.

Related

Date parse month format

While creating/testing a date adapter in my Angular project I ran into this issue. I think I must be missing some convention, but when changing the month to a single digit like 2 (for February) rather than 02, I get a different day.
Date.parse is giving two different outputs based on that different as pictured below. Any thoughts?
According to the documentation:
The ECMAScript specification states: If the String does not conform to the standard format the function may fall back to any implementation–specific heuristics or implementation–specific parsing algorithm.
Here, the second string does not match the expected format, and Chrome does something with it.
If you test it with Firefox, the same date is returned, so it's a Chrome "issue".
You can try to read V8's source code to understand why you get this and how it is actually implemented.
This isn't a lot of help, but I don't think you'll find anything without getting to the bottom of V8.

Moment dates are parsed different in Mozilla and Chrome?

I have an issue with dates in Mozilla, I am using fullcalendar plugin for angularJs in my project. While using the moment dates, Chrome seems to be working fine but Mozilla seems breaking. I am using Timezones with the moment. Many blogs and posts seems to mention the format of moment dates while having cross browser issues.
Here it is,
console.log(moment(new Date('2017-02-28T18:30:00')).format('dddd-MMM DD,YYYY'));
Mozilla : Tuesday-Feb 28,2017
Chrome : Wednesday-Mar 01,2017
I am really stuck with this, and I have seen post about mentioning the format with the moment dates, but I have used the format in the above sample but it fails to return the desired output. On the other hand Chrome is returning the correct result, what am I doing wrong ?
If you need any details please leave a comment.
Do not use moment(new Date('2017-02-28T18:30:00')) use moment(String) instead (since your input is in ISO 8601 format).
As moment parsing docs says:
Warning: Browser support for parsing strings is inconsistent. Because there is no specification on which formats should be supported, what works in some browsers will not work in other browsers.
Here a working sample:
console.log(moment('2017-02-28T18:30:00').format('dddd-MMM DD,YYYY'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
If your input is UTC use moment.utc:
moment.utc('2017-02-28T18:30:00')
If your input is in a given timezone (e.g. Asia/Calcutta) use moment.tz(..., String);
moment.tz('2017-02-28T18:30:00', 'Asia/Calcutta')
By default moment parses string in local time, you need to know timezone of your input. Note the moment has local(), utc(), and tz(String) methods to change timezone of a moment object.
You are converting a JS Date to a MomentJS date so I can only assume Firefox parses the JS date differently.
With MomentJS you should be able to simply replace your code:
moment(new Date('2017-02-28T18:30:00')).format('dddd-MMM DD,YYYY')
with:
moment('2017-02-28T18:30:00').format('dddd-MMM DD,YYYY')
https://momentjs.com/docs/#/parsing/
if you use angularjs, it's easier to use filter.
$filter('date')('2017-02-28T18:30:00', "dd/MM/yyyy");

Date input and toLocaleDateString using different locales

I reside in Canada, where we format our dates dd/mm/yyyy. I'm seeing something unusual when I'm calling toLocaleDateString()
HTML:
<input type="date" value="2016-01-13">
<p id="container">
</p>
JS:
var d = new Date("2016-01-13");
document.getElementById('container').innerText = d.toLocaleDateString();
The value of the date input is what I would expect - 2016-01-13.
The value of the paragraph is the American format - 12-01-2016 (the change in day is due to localizing from GMT to EST)
Chrome language is set to Canadian, as is my system setting (Windows 7). The date input seems to be respecting that, but I thought toLocaleDateString() would pick up Canada as my locale and format the date appropriately.
MSDN describes this function like this:
dateObj.toLocaleDateString( [locales][, options])
locales (Optional). An array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used.
Is the JavaScript runtime default locale something the user can change? I'm guessing not given my lack of success.
The different formatting between the date input and toLocaleDateString is quite baffling to me, any thoughts on how I can align the two?
http://jsfiddle.net/DfkU5/283/
Is the JavaScript runtime default locale something the user can change?
That depends entirely on the browser developers, they can do whatever they like. However, they tend to use system settings, but not always. Chrome ignores my settings for toLocalString, showing dates in m/d/y format when my preference is for d/m/y.
Safari, Chrome and Firefox all show a different string for toLocaleDate, which makes it just about useless.
The different formatting between the date input and toLocaleDateString is quite baffling to me, any thoughts on how I can align the two?
By far the best solution is to present dates in an unambiguous format, the easiest being to use the month name. All the following are unambiguous and easy to read:
19-Mar-2016
March 19, 2016
19 March, 2016
To do that you can write your own formatter (maybe 10 lines of code), or perhaps use a library.
In regard to input type date, not all browsers support it and there are lots of issues, so if you're going to use it you must check for support (fairly trivial) and if lacking, provide a fallback that does something sensible. And once you have a good fallback, you might as well implement it everywhere and forget input type date.
Then all the issues associated with it are gone. ;-)
Pass your locale as an arugment to toLocaleDateString()
e.g:
date.toLocaleDateString('en-CA')
or if you want to specify some fallback language, do this
date.toLocaleDateString(['en-CA','en-US'])
Check here

toISOString not working in firefox

I am creating a new date toISOString -
new Date(03-13-2016 00:00).toISOString();
This works fine in IE and Chrome however NOT in FireFox.
I have tried to modify the string slightly like -
new Date(03-13-2016T00:00:00Z).toISOString();
However this also failed. How can I achieve the desired result to work across all browsers?
2016-03-13T00:00:00.000Z
PS I am aware I start with a string then try and create a string with the toISOString - reason being this handles timezone offset to UTC in one line which is required.
When you pass a string to the Date constructor, it internally calls Date.parse to attempt to get a valid date from it. This first checks to see if it is one of the Date Time formats in the specification. If not (and both "03-13-2016 00:00" and "03-13-2016T00:00:00Z" aren't), the parse specification goes on to say:
If the String does not conform to that format the function may fall back to any implementation-specific heuristics or implementation-specific date formats. Unrecognizable Strings or dates containing illegal element values in the format String shall cause Date.parse to return NaN.
In this case, it seems both IE and Chrome have code in place that allows it to be correctly parsed, while Firefox doesn't. The only way you're really going to fix this is to have a string that conforms to the specification, or to call the constructor with individual date/time component parts.
If you don't mind pulling a library in or need to work with dates more often, use moment.js which has some very convenient date and time methods and is cross browser compatible.
Your string could then be converted to an ISO String like:
moment('03-13-2016 00:00', 'MM-DD-YYYY HH:mm').format();

Javascript - Retrieve OS Date formatting

Hmmm... Okay so I've been searching the web for 2 days now without any luck. I've seen a lot of answers on how to format a javascript date for example new Date().toString("yyyy-MM-dd")... Which would return something like 2013-04-05.
This is absolutely not the problem.
What I want, is the possibility to set the format in which my OS displays dates, then retrieve that specific format and display it in the browser.
For example, let's say I changed the format of the date in my OS to MM-yyyy/dd (this is for arguement sakes, whether that would work or not is irrelevant)). Then I'd expect to see 04-2013/05 in my OS, right? Next I want to retrieve this specific format in my browser via Javascript so that I can use this to format my dates throughout my webpage.
If this is lunacy and cannot be done, please tell me, as I've got a headache from searching.
Also, if you say use someDateObject.toLocaleDateString() without explaining exactly why .toLocaleDateString would work, I'm going to ignore it, because I've tried setting my date-format in my OS to numerous formats and every single time I use .toLocaleDateString(), I receive the same format: dd/MM/yyyy
first attribute of .toLocaleDateString method locale(s) used.
current locale you can obtain through navigator.language (in firefox or chrome) parameter.
in IE you can obtain navigator.browserLanguage or navigator.systemLanguage
in browsers other than IE it is impossible to obtain system language this way
after this you can call new Date.toLocaleString(navigator.language||navigator.browserLanguage) and it will be formated correctly depending on browser language

Categories