Date Picker
Pick one date from a calendar.
Examination dateTomorrow at the earliest.
11172026
Usage
import { DatePicker } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Booking and schedule dates near today.
When not to use
- Date of birth. Use three fields.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Always visible above the control. |
helperText | string | - | Help text below the control. |
errorMessage | string | - | Shown when isInvalid; replaces the helper text. |
variant | 'raised' | 'flat' | 'raised' | Raised on the canvas, flat inside a white card. |
size | 'sm' | 'md' | 'lg' | 'md' | md on desktop, lg on touch. |
isInvalid, isDisabled, isRequired | boolean | false | |
value, defaultValue, onChange | DateValue, DateValue, (v) => void | - | |
minValue, maxValue | DateValue | - | |
isDateUnavailable | (date) => boolean | - | Marks closed days. |
Accessibility
- Arrow keys move by day, Page Up and Page Down by month.
- Unavailable dates stay visible, dimmed.