Date Picker

6.4 KB gzip for the class module

Variants

Recorded states

• disabled recorded state; no setter
• expanded recorded state; no setter

Usage

Import

import '/components/date-picker/define.js';

// or register it yourself
import { DetentDatePicker } from '/components/date-picker/date-picker.js';

Attributes

• align
• default-month
• default-value
• disabled
• height
• locale
• max-date
• min-date
• name
• open
• placeholder
• range
• required
• side
• text
• value
• week-starts-on

Properties

• value
• defaultValue
• placeholder
• align
• side
• disabled
• range
• height
• text
• locale
• weekStartsOn
• minDate
• maxDate
• defaultMonth
• isDateDisabled
• name
• required
• open
• onChange

Slots

• default

Events

• detent-change — { date: Date | null } or { range: { from, to } }
• detent-close — { reason: 'escape' | 'outside' }

Example

Runnable example: site/examples/date-picker.ts. The snippet below is generated from the catalogued attributes.

<detent-date-picker
  align="start"
  default-month
  default-value
  disabled
  height
  locale
  max-date
  min-date
  name
  open
  placeholder="Pick a date' / 'Pick a range"
  range
  required
  side="auto"
  text
  value
  week-starts-on
></detent-date-picker>

Property-only values

const element = document.querySelector('detent-date-picker');
if (element !== null) {
  // onChange: (date: Date | null) => void | (range: DateRange) => void
  element.onChange = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/date-picker.tsx sha256 cd0d869892e0…

Native files

The native module and its artifacts:

• src/components/date-picker/date-picker.ts
• src/components/date-picker/styles.css
• src/components/date-picker/define.ts
• docs/components/date-picker.md
• site/examples/date-picker.ts
• tests/browser/date-picker.spec.ts
• evidence/components/date-picker.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Properties

Events

Slots

CSS customisation

• `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
• React callback props become typed composed CustomEvents; programmatic state assignment emits none.
• Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
• `lucide-react` icon components replaced with local SVG assets (ISC notice retained).
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• Controlled/uncontrolled React pair maps to initial-value attributes plus owned state and change events.
• `range` is a boolean attribute (default false) that switches the inner calendar to range mode; the pinned source expresses it through props the row does not record.
• The persistent calendar is re-anchored on open (an explicit default-month wins, else the selected month) where upstream mounted a fresh calendar per open.
• `open` is a read-only reflected state; the Framer Motion spring is a 160ms WAAPI opacity/scale entrance, cancelled on close and disconnect and absent under reduced motion.
• The popover is not top-layer (it matches upstream absolute positioning), so clipping by an ancestor with overflow:hidden is a recorded limitation.
• `side="auto"` always opens downward below 640px, and otherwise flips up only when the space below is short and the trigger sits at least `height` from the top.
• Native form participation added; the recorded `children` render function has no declarative slot equivalent.
• The inner calendar's detent-change/detent-click/input/change are stopped at the calendar element, so a document listener sees exactly one detent-change targeted at detent-date-picker.