2

When asking for a date in a HTML form, in the past I was using different solutions:

  1. Using 3 different fields for day, month, year

  2. Using a text field, but adding to the label something like "Start date (example: 31-12-2013)"

  3. Using a reverse date, e.g. 2013-12-31

Now I would like to use HTML5, and just have a input type='date'. This should also help users with mobiles.

For some browsers this may offer a date picker, for some just a text fields. But we all know there are different date formats, and sometimes the user's machine is not configured as he/she would expect. For instance, if I enter a date of 3 January 2014 as 03-01-2014 this can be interpreted as 1 March 2014 in other cultures.

What is the best I can do to help users to prevent mistakes? Is there a way to write an example, without knowing in advance what are his/her browser settings? And how do I know that PHP will interpret the date correctly?

dmedvinsky
  • 8,046
  • 3
  • 31
  • 25
carlo.borreo
  • 1,344
  • 2
  • 18
  • 35
  • You could take a look at using javascript to validate the format, like in [this](http://stackoverflow.com/questions/6978631/how-to-set-date-format-in-html-date-input-tag) thread – Hoedje Feb 25 '14 at 10:57
  • There's simply no way to say whether `1/2/2014` is Jan 2nd or Feb 1st. HTML5 might be the breaking trend but good old calendar-based date pickers have always worked nicely. – Álvaro González Feb 25 '14 at 10:58
  • keep the input textbox in readonly and use jquery datepicker to fill it – Karthick Kumar Feb 25 '14 at 10:59
  • As far as I can see, Chrome shows (in my locale) dd-mm-yyyy, but submits it as yyyy-mm-dd. Besides Chrome, (partial) support is limited to Opera, iOS Safari, Android and Blackberry, see: http://caniuse.com/#feat=input-datetime – Nic Wortel Feb 25 '14 at 11:05
  • I just realized how ambiguous is my question :-) – carlo.borreo Feb 26 '14 at 08:35

4 Answers4

1

Y-m-d is likely the best method, If you use jQuery UI's date picker you can specify the format.

http://jqueryui.com/datepicker/

you can also show an alternative format.

exussum
  • 18,275
  • 8
  • 32
  • 65
1

According to dev.w3.org it will supply you with "A valid full-date as defined in [RFC 3339]". However there is no way to know what the user meant if they enter 1/2/2014, although 2014-02-01 is unambiguous). As others have mentioned, go with a date picker if possible.

jalal
  • 469
  • 1
  • 4
  • 11
1

The HTML5 date input specification specifies a full-date format equal to: yyyy-mm-dd. You will receive date in this format always.

Follow this link for more information

Chethan N
  • 1,110
  • 1
  • 9
  • 23
1

Use ISO 8601 (YYYY-MM-DD) + HTML5's pattern and placeholder attributes

An alternative to falling back to javascript datepickers, might be using a validation (regex) pattern as fallback for browsers that don't support the date type:

<input type="date" placeholder="YYYY-MM-DD" name="date" value="" pattern="[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])" required="required">

While support for the date input type is still very limited, the pattern attribute's support is already more widespread. Of course you'll still need to check all submissions server side, but this should give a nice non-javascript solution for client side validation. You can use the placeholder attribute to show the right format, but since it's not supported by older browsers (IE9 and lower) it might be better to display the example outside of the form field.

html5pattern.com has a nice collection of ready-to-use input patterns, including date patterns but other ones as well. The benefit is that you can use the same pattern for your server side validation as well.

Nic Wortel
  • 11,155
  • 6
  • 60
  • 79