Getting Started with Allem UI Date Picker: Accessible Calendars for React

@allem-ui/date-picker provides four components for date and time selection: Calendar, DatePicker, DateRangePicker, and TimeField. Built on React Aria, every component is fully accessible with keyboard navigation, screen reader support, and internationalized date handling.

Installation

npm install @allem-ui/date-picker

If you have not already set up the Allem UI theme:

npm install @allem-ui/theme

Add the package to your Tailwind content paths:

// tailwind.config.ts
import { allemPreset } from "@allem-ui/theme";

export default {
  presets: [allemPreset],
  darkMode: "class",
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@allem-ui/date-picker/dist/**/*.{js,mjs}",
  ],
};

Calendar

A standalone month calendar for selecting a single date:

import { Calendar } from "@allem-ui/date-picker";

export default function CalendarDemo() {
  return <Calendar />;
}

The Calendar renders a full month view with navigation arrows. Users can navigate with arrow keys, and the component announces date changes to screen readers.

DatePicker

An input field with a popover calendar for selecting dates:

import { DatePicker } from "@allem-ui/date-picker";

<DatePicker label="Date of birth" />

The DatePicker combines a text input with a calendar popover. Users can type a date directly or click to open the calendar.

With Description and Error

<DatePicker
  label="Start date"
  description="When should the project begin?"
  errorMessage="Please select a future date."
/>

DateRangePicker

Two connected date inputs for selecting a range:

import { DateRangePicker } from "@allem-ui/date-picker";

<DateRangePicker label="Trip dates" />

This renders start and end date inputs with a two-month calendar view. Selecting a start date automatically focuses the end date input.

TimeField

A segmented input for hours, minutes, and AM/PM:

import { TimeField } from "@allem-ui/date-picker";

<TimeField label="Event time" />

Each segment (hour, minute, period) is individually editable with up/down arrow keys.

Date Utilities

The package re-exports types and utilities from @internationalized/date so you do not need to install it separately:

import {
  CalendarDate,
  CalendarDateTime,
  Time,
  ZonedDateTime,
  today,
  now,
  getLocalTimeZone,
  parseDate,
  parseDateTime,
  parseTime,
} from "@allem-ui/date-picker";

// Get today's date
const todayDate = today(getLocalTimeZone());

// Parse a date string
const birthday = parseDate("1995-03-15");

// Parse a time
const meetingTime = parseTime("14:30");

Controlled Example

Use React state to control the selected value:

import { useState } from "react";
import { DatePicker, type CalendarDate, parseDate } from "@allem-ui/date-picker";

export default function ControlledDatePicker() {
  const [date, setDate] = useState<CalendarDate>(parseDate("2026-01-01"));

  return (
    <div>
      <DatePicker
        label="Select a date"
        value={date}
        onChange={setDate}
      />
      <p>Selected: {date.toString()}</p>
    </div>
  );
}

Booking Form Example

Combine DateRangePicker and TimeField for a complete booking form:

import { DateRangePicker, TimeField } from "@allem-ui/date-picker";
import { Button, Card, CardBody, CardHeader, Input } from "@allem-ui/react";

export default function BookingForm() {
  return (
    <Card variant="outline">
      <CardHeader>Book a Meeting Room</CardHeader>
      <CardBody className="space-y-4">
        <Input label="Room name" placeholder="Conference Room A" />
        <DateRangePicker label="Dates" />
        <div className="grid grid-cols-2 gap-4">
          <TimeField label="Start time" />
          <TimeField label="End time" />
        </div>
        <Button className="w-full">Book Room</Button>
      </CardBody>
    </Card>
  );
}

What's Next

• Read the full Date Picker documentation
• Explore the Data Grid for advanced tables
• Check out the Allem UI getting started guide for the full library overview