How to detect date format defined by browser?

Question

I'm using HTML5 input type=date field and because some browsers still don't support this feature, I would like to create error validation message for browsers that display just normal text field instead of date field. This error message should look like

Please enter date in format: ...

But I need to find the correct format, that the browser is set to. Is there any php/js/jQuery way how to find out this?

Date formats are determined by the OS not the browser. You should dicate what format they should use, because I assume you're saving it to a database, so this saves you from changing the input for your db — Ryan B, May 31 '13 at 15:08
@jimmy That question is asking about the HTML5 calendar datepicker; this one is asking about international date formatting. — Blazemonger, May 31 '13 at 15:18
See [Is there any way to change input type="date" format?](http://stackoverflow.com/q/7372038/578288). It explains that the `value` attribute of the date input, [according to the spec](http://dev.w3.org/html5/markup/datatypes.html#form.data.date), must be in `YYYY-MM-DD` format. But the browser can present the date how it wants - usually either in that same format, or in the user's local format. — Rory O'Kane, May 31 '13 at 15:30
Does this answer your question? [How format JavaScript Date with regard to the browser culture?](https://stackoverflow.com/questions/8469436/how-format-javascript-date-with-regard-to-the-browser-culture) — Liam, Aug 20 '21 at 08:08

score 9 · Accepted Answer · answered May 31 '13 at 15:43

9

Thanks to @Jose Vega's answer I was able to find very easy way how to do it.

     var now=new Date(2013,11,31);
     var str=now.toLocaleDateString();
     str=str.replace("31","dd");
     str=str.replace("12","mm");
     str=str.replace("2013","yyyy");

Error message:

"Please enter date in format:" + str

answered May 31 '13 at 15:43

feri baco

615
4
8
15

Although, as the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FDate%2FtoLocaleDateString#Example:_Using_locales) point out, not everybody uses the same numbers Western nations do, so "2013" might not appear in the `.toLocaleDateString` at all. – Blazemonger May 31 '13 at 15:57
@Blazemonger That's true, but it suffices my needs though. Anyway, this is useful only for english-speaking ppl because dd,mm and yyyy won't make any sense to others – feri baco May 31 '13 at 16:57

score 3 · Answer 2 · edited May 23 '17 at 12:03

3

I have used the globalize library to do something similar. I don't know if its functionality has what you are looking for, but I know it does a good job handling different cultures. I use the window.navigator.userLanguage to determine culture and then feed it to the globalize library to do its thing. I've had success when dealing with currency and numbers.

EDIT: See if this helps:

var now=new Date();
alert(now.toLocaleString());

taken from How format JavaScript Date with regard to the browser culture?

Reference Displaying proper date format depending on culture

edited May 23 '17 at 12:03

Community

1
1

answered May 31 '13 at 15:03

Jose Vega

10,128
7
40
57

Thx, but isn't there any simpler way? Because that format obviously has to be saved somewhere within the browser – feri baco May 31 '13 at 15:06
1

You aren't going to get a simple answer to what has become a very complex question. As @RyanB pointed out, date formats are set by the OS and not the browser. However, you *can* use [`.toLocaleDateString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FDate%2FtoLocaleDateString) to output a particular `Date` object in the local format. – Blazemonger May 31 '13 at 15:25
Browsers are unrestricted in how they present a date input. At the time of writing Chrome has the most extensive date support [3]. It displays a date picker using the user's local calendar format. Opera (v10.6+) also displays a date picker, but shows the date in the wire format. Other browsers, such as Firefox 20 and Internet Explorer 9/10 display a text input field with the wire format. – feri baco May 31 '13 at 15:41

score -2 · Answer 3 · answered May 31 '13 at 15:12

-2

Why not to allow users to enter date in any format they like.

E.g. i am tourist in the USA and the browser says me to use format mm/dd/YYYY instead of my native dd.mm.YYYY.

Just get any date entered by users and parse it with Date.parse()

answered May 31 '13 at 15:12

claustrofob

5,448
2
19
22

4

Because then you can't be sure whether `1/5/13` means Jan. 5 or May 1. – Blazemonger May 31 '13 at 15:20
Yes you cant. But can you be sure about that if you will detect browser format? There is no dd/mm/YY format. There is only mm/dd/YY. If user wouldn't want to enter the proper date you will not make him do it. – claustrofob May 31 '13 at 15:24
@Blazemonger That's exactly what I was going to say – feri baco May 31 '13 at 15:25
There is one good example of what i mean. If you use google calendar try to create a new event. You can enter date in any format. When input looses focus it parses your date and transforms it to its common format. So even if you do a mistake you instantly see a result. – claustrofob May 31 '13 at 15:47

How to detect date format defined by browser?

3 Answers3