DatePicker

Datumväljare

Storybook

React Aria

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.

Välj ett datum

mm/dd/yyyy

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { DatePicker } from '@midas-ds/components'
// import { DateRangePicker } from '@midas-ds/components'

Välj ett datum

mm/dd/yyyy

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>
    </>
  )
}

Date (uncontrolled)

5/29/2026

Date (controlled)

5/29/2026

Du valde datum: 2026-05-29

DateRangePicker

<DateRangePicker label='Ange din semesterperiod' />

Ange din semesterperiod

mm/dd/yyyy

-

mm/dd/yyyy

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}
    />
  )
}

Välj ett datumFast inte förrän om en vecka

mm/dd/yyyy

API

DatePicker

Name	Type	Default	Description
description	string	-
errorMessage	string | ((validation: ValidationResult) => string)	-
errorPosition	"top" | "bottom"	top
label	string	-
size	Size	'large'	Component size (large: height 48px, medium: height 40px)
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: DateValue) => 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	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 null value indicates that the local props completely override all props received from a parent.

DateRangePicker