Date Picker

A customizable date and time picker component with bottom sheet UI.

import { DatePicker } from '@/components/ui/date-picker';
import React, { useState } from 'react';

export function DatePickerDemo() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>();

  return (
    <DatePicker
      label='Select Date'
      value={selectedDate}
      onChange={setSelectedDate}
      placeholder='Choose a date'
    />
  );
}

Installation


pnpm dlx bna-ui add date-picker

Usage

import { DatePicker } from '@/components/ui/date-picker';

const [selectedDate, setSelectedDate] = useState<Date | undefined>();
 
<DatePicker
  label='Select Date'
  value={selectedDate}
  onChange={setSelectedDate}
  placeholder='Choose a date'
/>;

Examples

Default

import { DatePicker } from '@/components/ui/date-picker';
import React, { useState } from 'react';

export function DatePickerDemo() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>();

  return (
    <DatePicker
      label='Select Date'
      value={selectedDate}
      onChange={setSelectedDate}
      placeholder='Choose a date'
    />
  );
}

Time Picker

import { DatePicker } from '@/components/ui/date-picker';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function DatePickerTime() {
  const [time24, setTime24] = useState<Date | undefined>();
  const [time12, setTime12] = useState<Date | undefined>();

  return (
    <View style={{ gap: 16 }}>
      <DatePicker
        label='24-Hour Time'
        mode='time'
        value={time24}
        onChange={setTime24}
        placeholder='Select time'
        timeFormat='24'
      />

      <DatePicker
        label='12-Hour Time'
        mode='time'
        value={time12}
        onChange={setTime12}
        placeholder='Select time'
        timeFormat='12'
      />
    </View>
  );
}

Date Time Picker

import { DatePicker } from '@/components/ui/date-picker';
import React, { useState } from 'react';

export function DatePickerDateTime() {
  const [dateTime, setDateTime] = useState<Date | undefined>();

  return (
    <DatePicker
      label='Date & Time'
      mode='datetime'
      value={dateTime}
      onChange={setDateTime}
      placeholder='Select date and time'
      timeFormat='12'
    />
  );
}

With Constraints

import { DatePicker } from '@/components/ui/date-picker';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function DatePickerConstraints() {
  const [pastDate, setPastDate] = useState<Date | undefined>();
  const [futureDate, setFutureDate] = useState<Date | undefined>();
  const [rangeDate, setRangeDate] = useState<Date | undefined>();

  const today = new Date();
  const maxPastDate = new Date();
  maxPastDate.setDate(today.getDate() - 1); // Yesterday

  const minFutureDate = new Date();
  minFutureDate.setDate(today.getDate() + 1); // Tomorrow

  const minRangeDate = new Date();
  minRangeDate.setMonth(today.getMonth() - 1); // Last month

  const maxRangeDate = new Date();
  maxRangeDate.setMonth(today.getMonth() + 1); // Next month

  return (
    <View style={{ gap: 16 }}>
      <DatePicker
        label='Past Dates Only'
        value={pastDate}
        onChange={setPastDate}
        placeholder='Select past date'
        maximumDate={maxPastDate}
      />

      <DatePicker
        label='Future Dates Only'
        value={futureDate}
        onChange={setFutureDate}
        placeholder='Select future date'
        minimumDate={minFutureDate}
      />

      <DatePicker
        label='Date Range'
        value={rangeDate}
        onChange={setRangeDate}
        placeholder='Select date in range'
        minimumDate={minRangeDate}
        maximumDate={maxRangeDate}
      />
    </View>
  );
}

Different Variants

import { DatePicker } from '@/components/ui/date-picker';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function DatePickerVariants() {
  const [filledDate, setFilledDate] = useState<Date | undefined>();
  const [outlineDate, setOutlineDate] = useState<Date | undefined>();
  const [groupDate, setGroupDate] = useState<Date | undefined>();

  return (
    <View style={{ gap: 16 }}>
      <DatePicker
        label='Filled Variant'
        variant='filled'
        value={filledDate}
        onChange={setFilledDate}
        placeholder='Select date'
      />

      <DatePicker
        label='Outline Variant'
        variant='outline'
        value={outlineDate}
        onChange={setOutlineDate}
        placeholder='Select date'
      />

      <DatePicker
        label='Group Variant'
        variant='group'
        value={groupDate}
        onChange={setGroupDate}
        placeholder='Select date'
      />
    </View>
  );
}

Time Formats

import { DatePicker } from '@/components/ui/date-picker';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function DatePickerFormats() {
  const [datetime24, setDateTime24] = useState<Date | undefined>();
  const [datetime12, setDateTime12] = useState<Date | undefined>();

  return (
    <View style={{ gap: 16 }}>
      <View>
        <Text variant='caption' style={{ marginBottom: 8 }}>
          24-Hour Format
        </Text>
        <DatePicker
          mode='datetime'
          value={datetime24}
          onChange={setDateTime24}
          placeholder='Select date and time'
          timeFormat='24'
        />
      </View>

      <View>
        <Text variant='caption' style={{ marginBottom: 8 }}>
          12-Hour Format with AM/PM
        </Text>
        <DatePicker
          mode='datetime'
          value={datetime12}
          onChange={setDateTime12}
          placeholder='Select date and time'
          timeFormat='12'
        />
      </View>
    </View>
  );
}

Form Integration

import { Button } from '@/components/ui/button';
import { DatePicker } from '@/components/ui/date-picker';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';
import { Alert } from 'react-native';

export function DatePickerForm() {
  const [birthDate, setBirthDate] = useState<Date | undefined>();
  const [appointmentDate, setAppointmentDate] = useState<Date | undefined>();
  const [errors, setErrors] = useState<{
    birthDate?: string;
    appointmentDate?: string;
  }>({});

  const validateForm = () => {
    const newErrors: typeof errors = {};

    if (!birthDate) {
      newErrors.birthDate = 'Birth date is required';
    } else {
      const today = new Date();
      const age = today.getFullYear() - birthDate.getFullYear();
      if (age < 18) {
        newErrors.birthDate = 'Must be 18 years or older';
      }
    }

    if (!appointmentDate) {
      newErrors.appointmentDate = 'Appointment date is required';
    } else {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      if (appointmentDate < today) {
        newErrors.appointmentDate = 'Appointment must be in the future';
      }
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = () => {
    if (validateForm()) {
      Alert.alert('Success', 'Form submitted successfully!');
    }
  };

  const maxBirthDate = new Date();
  maxBirthDate.setFullYear(maxBirthDate.getFullYear() - 18);

  const minAppointmentDate = new Date();
  minAppointmentDate.setDate(minAppointmentDate.getDate() + 1);

  return (
    <View style={{ gap: 16 }}>
      <Text variant='title' style={{ marginBottom: 8 }}>
        Registration Form
      </Text>

      <DatePicker
        label='Date of Birth'
        value={birthDate}
        onChange={(date) => {
          setBirthDate(date);
          if (errors.birthDate) {
            setErrors((prev) => ({ ...prev, birthDate: undefined }));
          }
        }}
        placeholder='Select your birth date'
        maximumDate={maxBirthDate}
        error={errors.birthDate}
      />

      <DatePicker
        label='Appointment'
        mode='datetime'
        value={appointmentDate}
        onChange={(date) => {
          setAppointmentDate(date);
          if (errors.appointmentDate) {
            setErrors((prev) => ({ ...prev, appointmentDate: undefined }));
          }
        }}
        placeholder='Select appointment date and time'
        minimumDate={minAppointmentDate}
        timeFormat='12'
        error={errors.appointmentDate}
      />

      <Button onPress={handleSubmit} style={{ marginTop: 8 }}>
        Submit Registration
      </Button>
    </View>
  );
}

API Reference

DatePicker

The main date picker component that handles date and time selection.

Prop	Type	Default	Description
`label`	`string`	-	Label text displayed above the picker.
`value`	`Date`	-	The currently selected date.
`onChange`	`(date: Date) => void`	-	Callback fired when the date changes.
`mode`	`'date' \| 'time' \| 'datetime'`	`'date'`	The picker mode - date only, time only, or both.
`placeholder`	`string`	`'Select date'`	Placeholder text when no date is selected.
`disabled`	`boolean`	`false`	Whether the picker is disabled.
`error`	`string`	-	Error message to display.
`minimumDate`	`Date`	-	The minimum selectable date.
`maximumDate`	`Date`	-	The maximum selectable date.
`timeFormat`	`'12' \| '24'`	`'24'`	Time format for time and datetime modes.
`variant`	`'filled' \| 'outline' \| 'group'`	`'filled'`	Visual variant of the picker trigger.
`style`	`ViewStyle`	-	Additional styles for the trigger container.
`labelStyle`	`TextStyle`	-	Additional styles for the label text.
`errorStyle`	`TextStyle`	-	Additional styles for the error text.

Features

Multiple Modes

Date Mode: Calendar-based date selection
Time Mode: Hour and minute selection with scrollable lists
DateTime Mode: Combined date and time selection with step-by-step flow

Flexible Time Formats

24-hour format: Standard 24-hour time display (00:00 - 23:59)
12-hour format: AM/PM time display with period selector

Date Constraints

Set minimum and maximum selectable dates
Automatic disabling of invalid dates
Visual feedback for disabled dates

Customizable Variants

Filled: Default filled background style
Outline: Border-only style with transparent background
Group: Minimal style for use within form groups

Accessibility Features

Full screen reader support
Keyboard navigation compatibility
High contrast mode support
Proper focus management

Month/year quick selection
Smooth navigation between months
Today button for quick access to current date
Intuitive calendar grid layout

Accessibility

The DatePicker component follows accessibility best practices:

Uses semantic markup for screen readers
Provides proper ARIA labels and descriptions
Supports keyboard navigation
Maintains focus management in the bottom sheet
Offers high contrast support for visually impaired users
Includes proper error announcement

Customization

The component uses your theme colors and can be customized through:

Theme color overrides
Custom styling props
Variant selection
Label and error styling
Container styling

Performance

Optimized calendar calculations with useMemo
Efficient date validation
Minimal re-renders with proper callback optimization
Smooth scrolling in time pickers

Combobox File Picker

BNA