Pickers

Date Menu

The date property menu from database views: a typed date field, a month grid, then End date / Date format / Include time / Remind rows and Clear. For a date form field, use Date Picker.

Date Picker (form field)
Oct 2026
End date
Date formatFull date
Include time
RemindNone
Clear
Learn about reminders

Usage

  • Use inside database date properties and other inline date menus.
  • Use DatePicker for a date field in a form, and Calendar for an always-visible month.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/DateMenuExample.tsx
import { useState } from 'react';
import { DateMenu, PopoverSurface } from '@krackedui/motion';

export function DatePropertyMenu() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 9, 12));
  return (
    <PopoverSurface width={248}>
      <DateMenu value={date} onChange={setDate} />
    </PopoverSurface>
  );
}

Examples

Calendar only

Oct 2026

Options on

Oct 2026
End date
Date formatRelative
Include time
Remind1 day before
Clear
Learn about reminders

API Reference

DateMenu

A <div> (all its props except onChange); popover content only: wrap it in Popover.Content width={248} or PopoverSurface width={248}. Adds:

PropTypeDefault
value
Date | null
onChange
(d: Date | null) => void
today
Date
new Date()
defaultMonth
Date
value ?? today
showOptions
boolean
true
dateFormatLabel
ReactNode
"Full date"
remindLabel
ReactNode
"None"
endDate
boolean
false
onEndDateChange
(v: boolean) => void
includeTime
boolean
false
onIncludeTimeChange
(v: boolean) => void
onDateFormatClick
() => void
onRemindClick
() => void
onLearnClick
() => void
highlightedRow
"learn""clear"

Helpers

PropTypeDefault
formatDisplayDate(d)
(d: Date) => string
dateMenuVariants
tv recipe

Accessibility

  • Day buttons are named with the full date and use aria-pressed for the selected day; previous / next month buttons are labelled. Tab moves through the days (no arrow-key grid; use Calendar or DatePicker when keyboard date entry matters).
  • The date field is labelled "Date"; Enter or blur commits a typed date.
  • Option rows sit in labelled listboxes ("Date options", "Clear date", "Help"). End date and Include time are role="option" rows with aria-checked; every actionable row is a Tab stop and Enter or Space activates it. Date format, Remind and Learn are actionable only when you pass their on…Click handler.
  • The month caption is a polite live region, so the new month is announced after previous / next.
© 2026 Motion. Internal documentation.