1

In the last couple major versions of Chrome, you can display a date input field with a value formatted to the user's locale, like so:

<input type="date" value="2012-11-20">

On Mac OS X, with United States set as my region (with the default date formats), Chrome shows me this:

A date input field displaying "11/20/12"

Is there any way to access the displayed string in JavaScript? (This answer refers to it as the presentation format.) Properties and methods like input.value and input.valueAsDate.toLocaleDateString() give me the same date in various formats, but none of them quite match the presentation format.

Here's a fiddle with some of my attempts: http://jsfiddle.net/peterjmag/7KSbA/2/. With Chrome 23 on my Mac, it gives me the following output:

[11/20/12]

input.value
2012-11-20

input.valueAsDate
Mon Nov 19 2012 17:00:00 GMT-0700 (MST)

input.valueAsDate.toDateString()
Mon Nov 19 2012

input.valueAsDate.toLocaleDateString()
Monday, November 19, 2012

input.valueAsDate.toISOString()
2012-11-20T00:00:00.000Z

EDIT: Here's a similar question that makes me think it's not possible (without defining a method to reformat the string, that is).

Community
  • 1
  • 1
peterjmag
  • 6,041
  • 1
  • 30
  • 27

2 Answers2

2

There's no way to get the text directly, as displaying the date is handled entirely by the browser (to further make the point, try using Inspect Element to find the string you're looking for on Chrome or Firefox- you won't be able to).

However, since each browser would display the date in the same format each time, it would be possible to have a script detect the browser and format the date in the same way the browser itself would. That would be the best option, I'm afraid.

username tbd
  • 9,152
  • 1
  • 20
  • 35
  • How will the script detect the regional variant being used? And will the script know which versions of which browsers support what format? And if so, why would the script bother to do all that when the value is in an unambiguous format in the first place and can use [Date.prototype.toLocaleString](http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.5.5) for display purposes? And will users know whether their browser is converting the date to a regional format or not? Why not just use an unambiguous, internationally recognized and supported format in the first place? – RobG Nov 21 '12 at 03:22
1
input.select();
var displayString = window.getSelection().toString();

This works on Chrome 23. But I don't think it will work on Chrome 24.

int32_t
  • 5,774
  • 1
  • 22
  • 20
  • Clever solution! I hadn't thought of that. – peterjmag Nov 21 '12 at 06:22
  • The [select](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34677168) method was introduced in DOM 2 HTML and is specified as having no return value. No return value is specified in [HTML5](http://www.w3.org/TR/html5/textFieldSelection.html#dom-textarea/input-select) either. The above depends a non–standard feature of a particular version of one browser, if that suits, fine. But it is not suitable as a general solution. – RobG Nov 22 '12 at 00:29