Used to facilitate date selection within forms or interfaces. The DateInput and DatePicker components are based on react-datepicker, offering a variety of customization options including single date selection, month/year picking, range selection, and controlled inputs. These components enhance user experience by providing intuitive and flexible date selection functionality.

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().setDate(start.getDate() + 7)

  const [range, setRange] = useState({ start, end })

  return (
    <Stack>
      <DateRange
        onChange={(r) => setRange(r)}
        selected={{ start, end }}
        flex={1}
      />
    </Stack>
  )
}
function Example() {
  const start = new Date()
  const end = new Date().setDate(start.getDate() + 7)

  const [range, setRange] = useState({ start, end })

  return (
    <Stack>
      <DateRange
        onChange={(r) => setRange(r)}
        selected={{ start, end }}
        flex={1}
      />
    </Stack>
  )
}
content_copy
Copy
live example