Date Picker

The Date Picker provides a text input with a calendar popover for selecting dates.

Basic Usage

import { Datepicker } from "@paramanu/forms-react"

export default function App() {
  return <Datepicker placeholder="Select date..." />
}

<div class="pm-datepicker pm-datepicker--outline pm-datepicker--md">
  <input type="text" class="pm-datepicker__input" role="combobox" aria-expanded="false" aria-haspopup="dialog" placeholder="Select date..." />
  <span class="pm-datepicker__icon" aria-hidden="true">&#128197;</span>
</div>

Accessibility

Feature	Detail
`role="combobox"`	Input role
`aria-haspopup="dialog"`	Opens a calendar dialog
Keyboard	Enter opens calendar, Escape closes

Props

Prop	Type	Default	Description
`variant`	`"outline" \| "filled" \| "unstyled"`	`"outline"`	Visual variant
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Size
`invalid`	`boolean`	`false`	Invalid state
`disabled`	`boolean`	`false`	Disabled state
`open`	`boolean`	`false`	Open state

CSS Classes

Class	Description
`pm-datepicker`	Base class
`pm-datepicker__input`	Text input
`pm-datepicker__icon`	Calendar icon
`pm-datepicker__popover`	Calendar popover