Hoppa till huvudinnehåll

DatePicker

Datumväljare

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 install @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}
/>
)
}
Fast inte förrän om en vecka

API

DatePicker

NameTypeDefaultDescription
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 PageBehaviorvisible

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 validationBehavior="native". For realtime validation, use the isInvalid prop instead.

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 "day" for dates, and "minute" for times.

hideTimeZone booleanfalse

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 null value indicates that the local props completely override all props received from a parent.

DateRangePicker