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.

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'

Användning

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.

API

Namn	Typ	Standard	Beskrivning
label	string	-
description	string	-
errorMessage	string | ((validation: ValidationResult) => string)	-
isDisabled	boolean	-	Whether the input is disabled.
id	string	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
value	DateValue	-	The current value (controlled).
defaultValue	DateValue	-	The default value (uncontrolled).
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isRequired	boolean	-	Whether user input is required on the input before form submission.
isInvalid	boolean	-	Whether the input value is invalid.
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.
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.
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).
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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.