PatternAvailable

Date Picker

A date selection control composed from Popover and Calendar.

Due date

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/date-picker.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

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

export default function Demo() {
  const [date, setDate] = useState<Date | undefined>();
  return (
    <div className="grid gap-2">
      <Label htmlFor="due-date">Due date</Label>
      <DatePicker
        id="due-date"
        label="Due date"
        value={date}
        onValueChange={setDate}
      />
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
value	Date or undefined	—	Selected date.
onValueChange	(date) => void	—	Required controlled update handler.
label	string	—	Accessible name for the control.
locale	DayPicker Locale	en-US	Calendar and date formatting locale.

Accessibility

Rules that should remain intact when adapting the component to a product.

Provide a visible label, an accessible name, and the appropriate calendar locale.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.