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
Yarn
pnpm

npm install @midas-ds/components

yarn add @midas-ds/components

pnpm add @midas-ds/components

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

Varianter

DatePicker

DateRangePicker

Begränsa val

API

DatePicker

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).
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
value	`DateValue`	-	The current value (controlled).
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.
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.
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).
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](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: DatePickerRenderProps & { 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.

Namn	Typ	Standard	Beskrivning
onFocus	`(e: FocusEvent<Element, Element>) => void`	-	Handler that is called when the element receives focus.
onBlur	`(e: FocusEvent<Element, Element>) => void`	-	Handler that is called when the element loses focus.
onChange	`(value: MappedDateValue<T>) => void`	-	Handler that is called when the value changes.
onKeyDown	`(e: KeyboardEvent) => void`	-	Handler that is called when a key is pressed.
onKeyUp	`(e: KeyboardEvent) => void`	-	Handler that is called when a key is released.
onFocusChange	`(isFocused: boolean) => void`	-	Handler that is called when the element's focus status changes.
onOpenChange	`(isOpen: boolean) => void`	-	Handler that is called when the overlay's open state changes.

Namn	Typ	Standard	Beskrivning
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.

DateRangePicker

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).
defaultValue	`RangeValue<T>`	-	The default value (uncontrolled).
autoFocus	`boolean`	-	Whether the element should receive focus on render.
value	`RangeValue<T>`	-	The current value (controlled).
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: RangeValue<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.
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.
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).
allowsNonContiguousRanges	`boolean`	-	When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
startName	`string`	-	The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
endName	`string`	-	The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
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: DateRangePickerRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`	-	The children of the component. A function may be provided to alter the children based on component state.
className	`string \| ((values: DateRangePickerRenderProps & { 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: DateRangePickerRenderProps & { 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.

Namn	Typ	Standard	Beskrivning
onFocus	`(e: FocusEvent<Element, Element>) => void`	-	Handler that is called when the element receives focus.
onBlur	`(e: FocusEvent<Element, Element>) => void`	-	Handler that is called when the element loses focus.
onChange	`(value: RangeValue<MappedDateValue<T>>) => void`	-	Handler that is called when the value changes.
onKeyDown	`(e: KeyboardEvent) => void`	-	Handler that is called when a key is pressed.
onKeyUp	`(e: KeyboardEvent) => void`	-	Handler that is called when a key is released.
onFocusChange	`(isFocused: boolean) => void`	-	Handler that is called when the element's focus status changes.
onOpenChange	`(isOpen: boolean) => void`	-	Handler that is called when the overlay's open state changes.

Namn	Typ	Standard	Beskrivning
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.

Installation​

Exempelkod

Varianter​

DatePicker​

Exempelkod

DateRangePicker​

Exempelkod

Begränsa val​

Exempelkod

API​

DatePicker​

Props

Events

Tillgänglighet

DateRangePicker​

Props

Events

Tillgänglighet

Installation

Varianter

DatePicker

DateRangePicker

Begränsa val

API

DatePicker

DateRangePicker