DateField

Datumfält

Storybook

React Aria

Datumfält används när användaren ska fylla i ett datum eller som ett fält där datum är representerat. Datumfältet bygger på React Arias DateField. In- och utdata till DateField liksom andra tidsrelaterade komponenter bygger på @internationalized/date så ytterligare referens till hur värden ska formateras hittas där.

EtikettBeskrivning

mm/dd/yyyy

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { DateField } from '@midas-ds/components';

<DateField
  label='Etikett'
  description='Beskrivning'
/>

EtikettBeskrivning

mm/dd/yyyy

Användning

DateField fungerar som andra formulärskomponenter och kan integreras i vanliga HTML-forms via name eller kan valideras i andra forms via validate eller isInvalid. Se props för samtliga egenskaper.

Lokalisering

Tänk på att formatet för inmatning (exempelvis YYYY/MM/DD) beror av användarens språkinställning så referera inte till det i etikett eller hjälptext.

<I18nProvider locale={'fr-Fr'}>
  <DateField
    label='Välj ett datum'
    description='vilket datum som helst'
  />
</I18nProvider>

Välj ett datumvilket datum som helst

jj/mm/aaaa

DateField stödjer också olika kalendrar, se React Aria och mdm web docs för referens om hur du går till väga för att konvertera datum mellan olika kalendrar.

<I18nProvider locale={'fr-Fr-u-ca-buddhist'}>
  <Example
    label={'Välj ett datum'}
    description={'Calendrier bouddhiste français'}
  />
</I18nProvider>

Välj ett datumCalendrier bouddhiste français

jj/mm/aaaa EB

Förvalt värde (uncontrolled)

Använd defaultValue för att sätta ett förvalt värde (uncontrolled). CalendarDate är ett datum utan tidskomponent.

import { CalendarDate } from '@internationalized/date'

<DateField defaultValue={new CalendarDate(2025, 12, 25)} />

Happy Kwanza

12/25/2025

Controlled value

Följer mönstret av andra input-fält, onChange och value ger tillgång till DateField-state. Använd funktioner ur @internationlized/date för korrekt översättning mellan olika format.

import { DateField } from '@midas-ds/components'
import { now, toCalendarDate, getLocalTimeZone } from '@internationalized/date'

export const DateFieldControlled = () => {
  const today = toCalendarDate(now(getLocalTimeZone()))
  const [date, setDate] = React.useState(today)
  return (
    <>
      <DateField
        value={date}
        onChange={setDate}
      />
      <pre>Du har valt datumet: {date?.toString()}</pre>
    </>
  )
}

4/23/2025

Du har valt datumet: 2025-04-23

API

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.
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	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.
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: DateFieldRenderProps & { defaultChildren: ReactNode; }) => ReactNode)	-	The children of the component. A function may be provided to alter the children based on component state.
className	string | ((values: DateFieldRenderProps & { 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: DateFieldRenderProps & { 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.