@allem-ui/date-picker

Accessible date and time picker components for Allem UI -- built on React Aria with full keyboard navigation and internationalization support.

Installation

npm install @allem-ui/date-picker @allem-ui/react @allem-ui/theme

Tailwind CSS Setup

Add the following to your main CSS file (e.g. globals.css) so Tailwind generates the utility classes used by the components:

@import "tailwindcss";
@source "@allem-ui/react";
@source "@allem-ui/date-picker";
@source "@allem-ui/theme";

Note: The @source directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.

Quick Start

import { DatePicker, Calendar, DateRangePicker, TimeField } from "@allem-ui/date-picker";
import { today, getLocalTimeZone } from "@allem-ui/date-picker";

export function BookingForm() {
  return (
    <div>
      <DatePicker label="Start date" />
      <DateRangePicker label="Trip dates" />
      <TimeField label="Check-in time" />
      <Calendar defaultValue={today(getLocalTimeZone())} />
    </div>
  );
}

Components

| Component | Description | |-----------|-------------| | Calendar | Standalone calendar grid for date selection | | DatePicker | Date input field with calendar popover | | DateRangePicker | Select a start and end date range | | TimeField | Time input field with hour/minute/period segments |

Re-exported Utilities

Date utilities from @internationalized/date are re-exported for convenience:

CalendarDate CalendarDateTime Time ZonedDateTime parseDate parseDateTime parseTime parseZonedDateTime today now getLocalTimeZone

Features

• Accessible -- Built on React Aria for full WCAG compliance
• Keyboard navigation -- Complete keyboard support for all date/time components
• Internationalized -- Locale-aware date formatting and calendar systems
• Date ranges -- Select start/end date ranges with visual highlighting
• Time input -- Segmented time field with AM/PM support
• Dark mode -- First-class dark mode with dark: Tailwind prefix
• TypeScript strict -- Full type safety with exported prop types
• Tree-shakeable -- ESM + CJS builds, import only what you use

Part of Allem UI

This is a standalone package in the Allem UI monorepo. For core components, see @allem-ui/react.

Support

If you find Allem UI useful, consider supporting its development:

License

MIT - Ahmed Allem