How do I retrieve the users Operating System preferred Date and Time formats in JavaScript

Question

I have noticed that using the html code below:

<input type="date" value="2017-12-13" />

Results in an input looking like this:

This formatting is consistant with by windows formatting configuration:

However I have found no evidence that I can format dates manually using a javascript function.

It seems strange that they provide this functionality in an html element but not in javascript.

As a hacky approach, I have looked into just creating an input, disabling it and formatting it using css to look like simple text.

Is there a function I am not aware of to make use of this formatting and if not, are there any plans to add this functionality.

For an easy way to test yourself, follow the formatting changes in windows indicated in the image above. Restart google chrome, then visit https://jsfiddle.net/3hyyv04d/1/

Of that's happening it's because of some JavaScript you're using. The basic browser code won't re-write date strings like that. — Pointy, Oct 05 '17 at 22:30
I am not sure I understand the question, you want a function that can format a date object like the user OS does? — MinusFour, Oct 05 '17 at 22:50
@Pointy its happening without javascript, try it yourself - see https://jsfiddle.net/3hyyv04d/ — Josh Mc, Oct 06 '17 at 00:19
@MinusFour yes, I am looking for a function that performs the same behavior as an eg format("2017-12-13") with output being dependent on OS settings. — Josh Mc, Oct 06 '17 at 00:19
All such behaviour is implementation dependent and inconsistent. You can't reliably detect anything in regard to the platform on which a host is running. This question has been asked many, many times before in many different forms, e.g. [*How to get locale date format (NOT formatted date but the format itself)*](https://stackoverflow.com/questions/46502541/how-to-get-locale-date-format-not-formatted-date-but-the-format-itself). — RobG, Oct 06 '17 at 00:46
It sounds like the answer boils down to "The browser provides its own formatting functionality inside an input, which is not available in javascript. — Josh Mc, Oct 06 '17 at 01:09
@JoshMc, you can still get a locale string of the date with `date.toLocaleDateString` just not get the actual locale — MinusFour, Oct 06 '17 at 01:23
@JoshMc when I look at your jsfiddle I see "2017-12-13", which is exactly what the "value" attribute is set to. — Pointy, Oct 06 '17 at 01:31
@Pointy, it depends on the browser, I do get the same result as the screenshot and I'm not running any extension or anything. The mdn page for [date input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) has more screenshots you can check out. — MinusFour, Oct 06 '17 at 02:07
@MinusFour—that is very unreliable, *toLocaleString* is entirely implementation dependent and returns different strings in different browsers, with different formatting of the values (unless perhaps if you use US English). — RobG, Oct 06 '17 at 04:26
@RobG I believe this is similar to the way type="date" works - view fiddle in chrome. — Josh Mc, Oct 12 '17 at 23:26
@MinusFour I did consider using toLocaleDateString(), but what I am looking for is more specific then locale, you can have locale = australia, but have your date formatting set to american style mm/dd/yyyy and you will notice that toLocaleDateString() will NOT respect OS settings, where input[type=date] will. Follow original instructions & see https://jsfiddle.net/3hyyv04d/1/ — Josh Mc, Oct 12 '17 at 23:33
Must say I am a bit confused as to why everyone is jumping on the "this is a duplicate" train. None of the linked questions answer this question. but as I said it sounds like the answer is "Browsers provide this functionality inside an input, but provide no replica in accessible js functions" — Josh Mc, Oct 12 '17 at 23:37
@JoshMc—it's a duplicate in that you can't reliably determine the format the user has specified in system preferences using javascript. Where I live, it's reasonably common to see "September 30, 2017" but not ever "09/30/2017", in other words, different sequences of values are used in different formats, you can't infer one from the other. And *toLocaleString* is entirely implementation dependent, you can't rely on its format matching any user preference, their current location or language. — RobG, Oct 13 '17 at 00:42
Possible duplicate of [How to get the exact local time of client?](https://stackoverflow.com/questions/10659523/how-to-get-the-exact-local-time-of-client) — Josh Mc, Jan 22 '19 at 00:17

score 1 · Answer 1 · answered Oct 05 '17 at 22:57

1

I think there is no core function you missed and there are at the time of writing no plans to add it as the RFC is closed by now. This topic has all the neccessary information: Is there any way to change input type="date" format?

answered Oct 05 '17 at 22:57

Harry

1,233
10
24

1

That isn't an answer, it should be a comment. You should have marked it as a duplicate of question you've linked. – RobG Oct 06 '17 at 00:50

score 1 · Answer 2 · answered Oct 05 '17 at 22:59

Similar Questions have been answered here already. How to get the exact local time of client? also here How to find the operating system version using JavaScript and also How to detect my browser version and operating system using JavaScript?
Detecting OS:

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);


// 2. To know the timezone of the client relative to GMT/UTC here you go:

    var d = new Date();
    var tz = d.toString().split("GMT")[1].split(" (")[0]; // timezone 

    var d = new Date();
    var tz = d.toString().split("GMT")[1]; // timezone, i.e. -0700 (Pacific Daylight Time)

That right @RobG. I answered instead of commenting because I don't have the required privilege. Noted all the same. Thks — Nditah, Oct 06 '17 at 02:13

How do I retrieve the users Operating System preferred Date and Time formats in JavaScript

2 Answers2