Date Fields

Compound date field beta

This is a group of fields, where month, day and year are separate inputs. Having separate fields may be the most user friendly way of asking a user for input, with clear labels for each field, and without relying on special formatting (MM/DD/YYYY) that may be confusing to some users.

The month field acts as an autosuggest. As the user types a month, the field displays a dropdown with matching months, and makes it easier to select the correct one. It also allows the user to type month numbers, such as "1" or "01", which would match the appropriate month "January".

Note: additional validation and user assistance may be implemented in the day and year inputs.

Month

Day

Year

javascript : Date input

<CompoundDateField label="Date" field={field} />
// value = { month: "...", day: "...", year: "..." }

Its also useful when you may not need a full date, but just a two of the date components. For example, when asking for a user's birthday, it may not be necessary or appropriate to know their birth year.

Month

Day

javascript : Date input with no year

<CompoundDateField
  label="Your birthday"
  field={field}
  parts={["month", "day"]}
/>

A note on birthdays

In the above example, we are asking for a user's birthday. Please consider if you really need to ask for a user's birthday, since this is private personal information. For example, you may simply be trying to ascertain if a user is an adult. A simpler, less intrusive "Are you over 18" checkbox would suffice in this case.