Version: v0.22.x

Birthday picker

A date-of-birth field that enforces a minimum age of 13 and shows the age. It opens a calendar styled for each design, in a bottom sheet on phones and a dropdown on the web; display="wheel" switches to date wheels.

Loading…

<DatePickerField
  label="Date of birth"
  title="Birthday"
  placeholder="Select your birthday"
  value={birthday ?? new Date(2000, 0, 1)}
  displayValue={
    birthday
      ? `${formatDate(birthday, undefined, { dateStyle: 'long' })} · ${ageOf(birthday)} y/o`
      : ''
  }
  onConfirm={setBirthday}
  minDate={yearsAgo(110)}
  maxDate={yearsAgo(MIN_AGE)}
/>

Notes

In the calendar, tap the month title to jump to a year instead of paging back month by month. Some apps prefer display="wheel" for birthdays, since a year wheel reaches decades back in one flick.
value opens the picker on 2000 before anything is picked, so displayValue is what keeps the placeholder showing until the user confirms.
maxDate 13 years ago disables later days (and months and years on the wheels) and clamps the value, so under-13 dates can't be confirmed.
With wheels, the column order follows the locale (M/D/Y in the US, D/M/Y in most of the world). Pass wheelProps={{ order: ['day', 'month', 'year'] }} to force one.
Store birthdays as toDateKey(birthday) (YYYY-MM-DD). They're calendar days, not instants.

Notes​

Notes