Date Cell Picker

Usage

• Use DateCellPicker as the popover behind a date property cell.
• It emits a single ISO date (YYYY-MM-DD) or null from Clear; the end date, time and reminder switches only change the popover locally.
• Pass today when you need a fixed reference date (tests, demos).
• Don’t use it for date fields in forms; use DatePicker or DateRangePicker instead.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { DateCellPicker, SAMPLE_TODAY } from '@krackedui/motion';

export function DateDemo() {
  const [value, setValue] = useState<string | null>('2026-10-12');
  return <DateCellPicker value={value} onChange={setValue} today={SAMPLE_TODAY} />;
}

Examples

Empty value

Composition

<DateCellPicker>                // 248 wide
  date input (Enter commits typed text)
  month caption · Today · ‹ ›
  role="grid" → columnheader × 7 · gridcell → day button (aria-pressed)
  End date (switch) · Date format › · Include time (switch) · Remind ›
  Clear · Learn about reminders
</DateCellPicker>

API Reference

DateCellPicker

Based on <div> and supports its props (except onChange). Adds:

Accessibility

• Day buttons have a full date aria-label and aria-pressed for the selected day; the grid uses grid / columnheader / gridcell.
• Month arrows are labelled "Go to previous month" / "Go to next month"; switches are labelled "End date" and "Include time".