/ux
Components/Misc/InlineDatePicker

InlineDatePicker

Misc

Always-visible inline date picker without a popover.

Renders the calendar grid inline (not in a popover). Use when screen real estate allows a persistent picker, such as a sidebar filter panel or a settings page.

Usage

import { InlineDatePicker } from "nosible-ux"
import { useState } from "react"

export default function Example() {
  const [date, setDate] = useState<Date | null>(null)
  return <InlineDatePicker value={date} onChange={setDate} />
}

Examples

With default month

SuMoTuWeThFrSa
NO DATE SELECTED

Accessibility

Calendar grid keyboard navigation (arrows, Home/End, Page Up/Down) matches DateInput. Selected date is announced. The clear button below the calendar is labeled "Clear".

Props

Name TypeDefaultDescription
defaultMonth
Date | undefined—Month shown on first render. Defaults to the selected date, then today.
onChange
(d: Date | null) => void—Called whenever the user selects or clears a date.
value
Date | null—Currently selected date. Pass `null` to clear.
← All ComponentsGetting Started →