Usage

Full Date Picker

Render a comprehensive date picker that allows users to select single dates.

import { DateInput } from '@passfort/castle'
content_copy
Copy

<DateInput />
<DateInput />
content_copy
Copy
live example

Month Picker

Provide a date picker focused on selecting months.

import { Month } from '@passfort/castle'
content_copy
Copy

<Month />
<Month />
content_copy
Copy
live example

Year Picker

Allow users to select a specific year using the date picker.

import { Year } from '@passfort/castle'
content_copy
Copy

<Year />
<Year />
content_copy
Copy
live example

Date Range Picker

Enable selection of a range of dates, useful for booking systems or reports.

import { DateRange } from '@passfort/castle'
content_copy
Copy

<DateRange onChange={(r) => log(r)} />
<DateRange onChange={(r) => log(r)} />
content_copy
Copy
live example

Controlled Date Range Picker

Manage the selected date range through component state for more controlled interactions.

function Example() {
  const start = new Date()
  const end = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
  const [range, setRange] = useState({ start, end })

  return (
    <Stack>
      <DateRange value={range} onChange={(r) => setRange(r)} flex={1} />
    </Stack>
  )
}
function Example() {
  const start = new Date()
  const end = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
  const [range, setRange] = useState({ start, end })

  return (
    <Stack>
      <DateRange value={range} onChange={(r) => setRange(r)} flex={1} />
    </Stack>
  )
}
content_copy
Copy
live example