javascript - HTML 5 - Input type date formatting on iOS - Stack Overflow

admin管理员组

文章数量:1344300

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?

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?

• javascript
• html

Share Improve this question Follow edited Apr 14, 2012 at 12:12 alex 491k204204 gold badges889889 silver badges991991 bronze badges asked Apr 14, 2012 at 12:09 JavaScript DeveloperJavaScript Developer 4,0081111 gold badges4343 silver badges4646 bronze badges 1

• 2 possible duplicate of Specifying the value output of of an HTML5 input type = date? – epascarello Commented Apr 14, 2012 at 12:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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);

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.

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.

The following should do it.

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

本文标签： javascriptHTML 5Input type date formatting on iOSStack Overflow