HTML 5 - Input type date formatting on iOS

Question

I am using an HTML 5 form on an iPhone. This form has an input element like the following:

<input id="birthdate" type="date" />

When a user clicks this field, the iOS date picker appears. After a user selects a date, it puts the date in the field displayed as something like: Apr 14, 2012.

My question is, is there a way to format this date so that it looks like 04-14-2012 in the text box? Or, preferably, is there an straight forward approach to converting the iOS date format to a JavaScript Date object?

possible duplicate of [Specifying the value output of of an HTML5 input type = date?](http://stackoverflow.com/questions/3496241/specifying-the-value-output-of-of-an-html5-input-type-date) — epascarello, Apr 14 '12 at 12:19

score 4 · Answer 1 · answered Apr 14 '12 at 12:18

I always thought the format was meant to be YYYY-MM-DD.

W3C spec & RFC3339.

Anyway, you could convert it with JavaScript.

var dateInput = document.getElementById('birthdate');

dateInput.addEventListener('change', function() {
    dateInput.value = new Date(dateInput.value).toISOString().split('T')[0];
}, false);

score 2 · Answer 2 · answered Apr 14 '12 at 13:59

No.

There are two formats at play:

displayed format
internal format exposed to JavaScript and sent to the server

You cannot change the display format. It's up to the browser to decide how the date is presented to the user (in practice it's determined by system's locale).

You cannot change the internal format either. It's always ISO8601, regardless of browser/locale.

score 0 · Answer 3 · answered Nov 21 '12 at 19:14

I agree with @PorneL's answer, however, you can potentially do some work to simulate the results you want. I will stipulate that it's not the best way to do it.

In pseudo code:

Have two inputs, one of type date and another of text.
Make the date input either invisible or 1px x 1px in side, and make the input the size that of the date that you would like
On focus on the text input, set focus on the adjacent date input automatically.
At this point, the user will be editing the date input field
On change of the date field, grab the value and insert it into the text field using whatever formatting you prefer.

Again, it may not be the best solution, but it can work this way.

score -2 · Answer 4 · edited Oct 06 '12 at 17:31

-2

The following should do it.

$dat = new DateTime($_POST['MyDATE']);
$new_format = $dat->format('Y-m-d');

edited Oct 06 '12 at 17:31

jeremy

9,965
4
39
59

answered Oct 06 '12 at 16:40

karim

1

3

Why do you expect the backend to be written in PHP? – Markus Unterwaditzer Oct 06 '12 at 17:34
the question asked was for front end and solution is provided with back end script ? – Jayesh Ambali Aug 01 '22 at 17:38

HTML 5 - Input type date formatting on iOS

4 Answers4

Linked