BNA

BNA UI
...

Date Picker

PreviousNext

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

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

Time Picker

Date Time Picker

Date Range

With Constraints

Different Variants

Time Formats

Form Integration

API Reference

DatePicker

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

PropTypeDefaultDescription
labelstring-Label text displayed above the picker.
valueDate-The currently selected date.
onChange(date: Date) => void-Callback fired when the date changes.
mode'date' | 'range' | 'time' | 'datetime''date'The picker mode - date only, time only, or both.
placeholderstring'Select date'Placeholder text when no date is selected.
disabledbooleanfalseWhether the picker is disabled.
errorstring-Error message to display.
minimumDateDate-The minimum selectable date.
maximumDateDate-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.
styleViewStyle-Additional styles for the trigger container.
labelStyleTextStyle-Additional styles for the label text.
errorStyleTextStyle-Additional styles for the error text.

Features

Multiple Modes

  • Date Mode: Calendar-based date selection
  • Range Mode: Calendar-based range 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

Navigation

  • 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
ComboboxFile Picker