DatePicker
Inmatningsfält för att välja ett eller flera datum. Består av två komponenter DatePicker
för att välja ett datum samt DateRangePicker
för att välja ett spann mellan två datum.
Installation
- npm
- Yarn
- pnpm
npm install @midas-ds/components
yarn add @midas-ds/components
pnpm add @midas-ds/components
import { DatePicker } from '@midas-ds/components'
// import { DateRangePicker } from '@midas-ds/components'
Användning
DatePicker och DateRangePicker bygger på React Aria komponenter, DatePicker, DateRangePicker som i sin tur består av andra komponenter som Calendar, DateField. För fullständig dokumentation och ytterligare varianter hänvisas till den dokumentationen.
DatePicker
import { parseDate, CalendarDate } from '@internationalized/date'
import { DatePicker } from '@midas-ds/components'
export const DatePickerExample = () => {
const [value, setValue] = React.useState<CalendarDate | null>(
parseDate('2026-05-29'),
)
return (
<>
<DatePicker
label='Date (uncontrolled)'
defaultValue={parseDate('2026-05-29')}
/>
<DatePicker
label='Date (controlled)'
value={value}
onChange={setValue}
/>
<pre>Du valde datum: {value?.toString()}</pre>
</>
)
}
Du valde datum: 2026-05-29
DateRangePicker
<DateRangePicker label="Ange din semesterperiod" />
Begränsa val
Använd callback isDateUnavailable
för att markera datum som inte valbara. Använd minValue
till exempel
för att begränsa datum före dagens datum.
import {
today,
getLocalTimeZone,
} from '@internationalized/date'
export const UnavailableDateExample = () => {
const now = today(getLocalTimeZone())
const isDateUnavailable = (date: DateValue) => {
return date.compare(now.add({ weeks: 1 })) < 0
}
return (
<DatePicker
label='Välj ett datum'
description={'Fast inte förrän om en vecka'}
isDateUnavailable={isDateUnavailable}
minValue={now}
/>
)
}
API
DatePicker
Name | Type | Default | Description |
---|---|---|---|
label | string | - | |
description | string | - | |
errorMessage | string | ((validation: ValidationResult) => string) | - | |
errorPosition | "top" | "bottom" | top | |
isDisabled | boolean | - | Whether the input is disabled. |
id | string | - | The element's unique identifier. See MDN. |
defaultValue | DateValue | - | The default value (uncontrolled). |
autoFocus | boolean | - | Whether the element should receive focus on render. |
name | string | - | The name of the input element, used when submitting an HTML form. See MDN. |
value | DateValue | - | The current value (controlled). |
minValue | DateValue | - | The minimum allowed date that a user may select. |
maxValue | DateValue | - | The maximum allowed date that a user may select. |
isDateUnavailable | (date: DateValue) => boolean | - | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. |
isReadOnly | boolean | - | Whether the input can be selected but not changed by the user. |
isInvalid | boolean | - | Whether the input value is invalid. |
pageBehavior | PageBehavior | visible | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. |
firstDayOfWeek | "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | - | The day that starts the week. |
isRequired | boolean | - | Whether user input is required on the input before form submission. |
validate | (value: MappedDateValue<T>) => true | ValidationError | - | A function that returns an error message if a given value is invalid.
Validation errors are displayed to the user when the form is submitted
if |
placeholderValue | DateValue | - | A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. |
hourCycle | 12 | 24 | - | Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. |
granularity | Granularity | - | Determines the smallest unit that is displayed in the date picker. By default, this is |
hideTimeZone | boolean | false | Whether to hide the time zone abbreviation. |
shouldForceLeadingZeros | boolean | - | Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale. |
isOpen | boolean | - | Whether the overlay is open by default (controlled). |
defaultOpen | boolean | - | Whether the overlay is open by default (uncontrolled). |
shouldCloseOnSelect | boolean | (() => boolean) | true | Determines whether the date picker popover should close automatically when a date is selected. |
validationBehavior | "native" | "aria" | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
children | ReactNode | ((values: DatePickerRenderProps & { defaultChildren: ReactNode; }) => ReactNode) | - | The children of the component. A function may be provided to alter the children based on component state. |
className | string | ((values: DatePickerRenderProps & { defaultClassName: string; }) => string) | - | The CSS className for the element. A function may be provided to compute the class based on component state. |
style | CSSProperties | ((values: DatePickerRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | - | The inline style for the element. A function may be provided to compute the style based on component state. |
slot | string | - | A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit |