Hoppa till huvudinnehåll

DatePicker

Datumväljare
Version: 1.0.8
Versionslogg
Storybook
Referens

Fält för att välja ett datum eller ett spann av datum med kalender. Består av två komponenter DatePicker för att välja ett datum samt DateRangePicker för att välja ett spann av (2) datum.

Installation och användning​

npm install @midas-ds/date-picker

DatePicker​

import { DatePicker } from '@midas-ds/date-picker'

DateRangePicker​

import { DateRangePicker } from '@midas-ds/date-picker'

API​

DatePicker​

NamnTypStandardBeskrivning
label string-
description string-
errorMessage string | ((validation: ValidationResult) => string)-
value DateValue-The current value (controlled).
defaultValue DateValue-The default value (uncontrolled).
defaultOpen boolean-Whether the overlay is open by default (uncontrolled).
isDisabled boolean-Whether the input is disabled.
autoFocus boolean-Whether the element should receive focus on render.
id string-The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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).
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 PageBehaviorvisibleControls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
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 booleanfalseWhether 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).
shouldCloseOnSelect boolean | (() => boolean)trueDetermines 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.

DateRangePicker​

Beroenden

    • @midas-ds/textfield@1.1.0
    • react-aria-components@^1.1.1
    • lucide-react@^0.453.0
    • react@^18.3.1