Hoppa till huvudinnehåll

DatePicker

Datumväljare

Inmatningsfält för att välja ett eller flera datum. Välj DatePicker för att val av enstaka datum och DateRangePicker för att välja ett spann mellan två datum.

import { DatePicker } from '@midas-ds/components'
<DatePicker label='Välj ett datum' />

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
descriptionstring-
errorMessage-
errorPositiontop
labelstring-
size'large'

Component size (large: height 48px, medium: height 40px)

popoverInfoPopoverProps-

An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button.

isDisabled-

Whether the input is disabled.

autoFocus-

Whether the element should receive focus on render.

namestring-

The name of the input element, used when submitting an HTML form. See MDN.

value-

The current value (controlled).

defaultValue-

The default value (uncontrolled).

idstring-

The element's unique identifier. See MDN.

isReadOnly-

Whether the input can be selected but not changed by the user.

isRequired-

Whether user input is required on the input before form submission.

isInvalid-

Whether the input value is invalid.

validate(value: boolean) => 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.

defaultOpen-

Whether the overlay is open by default (uncontrolled).

isOpen-

Whether the overlay is open by default (controlled).

minValue-

The minimum allowed date that a user may select.

maxValue-

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.

pageBehaviorvisible

Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.

firstDayOfWeek-

The day that starts the week.

placeholderValue-

A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.

hourCycle-

Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.

granularity-

Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.

hideTimeZonefalse

Whether to hide the time zone abbreviation.

shouldForceLeadingZeros-

Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.

shouldCloseOnSelecttrue

Determines whether the date picker popover should close automatically when a date is selected.

validationBehavior'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-

The children of the component. A function may be provided to alter the children based on component state.

className-

The CSS className for the element. A function may be provided to compute the class based on component state.

style-

The inline style for the element. A function may be provided to compute the style based on component state.

slotstring-

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