Version: v0.8.0

Birthday picker

A date-of-birth field that opens a wheel sheet, enforces a minimum age of 13, and shows the age.

Result

Live Editor

import { useState } from 'react';
import { DatePickerField, formatDate } from '@elik56a/react-native-pickers';

const MIN_AGE = 13;

const yearsAgo = (n: number) => {
  const d = new Date();
  d.setFullYear(d.getFullYear() - n);
  return d;
};

const ageOf = (b: Date) => {
  const now = new Date();
  const hadBirthday = now.getMonth() > b.getMonth() || (now.getMonth() === b.getMonth() && now.getDate() >= b.getDate());
  return now.getFullYear() - b.getFullYear() - (hadBirthday ? 0 : 1);
};

export default function Birthday() {
  const [birthday, setBirthday] = useState<Date | null>(null);
  return (
    <DatePickerField
      label="Date of birth"
      title="Birthday"
      placeholder="Select your birthday"
      display="wheel"
      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

value starts the wheel 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 on the wheel and clamps the value, so under-13 dates can't be confirmed.
The wheel's 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