Components
Date Picker
The Date Picker comes with multiple options: time, range and as a simple calendar
<No Display Name onSet={function noRefCheck() {}} />
The Date Picker is an extension of the react-calendar , and the props available for the react-calendar are possible to pass in to the Date Picker.
Properties
DatePicker
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| branding | union | 'neutral' | Custom branding. Built in support for neutral, sport and tur. |
| hasButtons | bool | false | If false, the calendar will close and run onSet Function on date selection. If true, the calendar will stay open and run onSet Function on submit. If calendar has time, the calendar will always have submit button and onSet function is called onSubmit. If calendar has range, the calendar will always have submit button and onSet function is called onSubmit. |
| hasDisabledFormTag | bool | false | Disable the wrapping form tag. If you use this prop you need to wrap the DatePicker in a svs Form tag. |
| hasError | bool | false | If component has an error state. |
| hasRange | bool | false | If calendar has range selection. |
| hasTime | bool | false | If calendar has time selection. If calendar has range and time, two time pickers will be rendered. One for start time and one for end time. |
| isDisabled | bool | false | Disables the input. Default is false. |
| isOpen | bool | false | Controls the visibility of the calendar. |
| minDate | instanceOf | new Date(2019, 0, 1) | Sets the minimum date that the calendar will display. Default to 1/1 2019. |
| onOpen | () => {} | ||
| openWithButton | bool | false | If the calendar should open with a button. Default is false. |
| popupPosition | union | '' | If set calendar should appear on top of other elements. And is aligned to the left, center or right. |
| className | string | Custom classes. | |
| enabledDatesArray | array | Array with dates objects that should be the only available dates to pick. Should be in yyyy-mm-dd format. | |
| errorMessage | string | Customized error message. | |
| externalInputValue | string | Custom external input value. | |
| helpMessage | string | Customized help message for input. | |
| infoMessage | string | Customized info message. | |
| initialDate | instanceOf | Initial date for the calendar. Defaults no date if not set. | |
| initialEndTime | string | Initial ending time for the calendar. Defaults to 00:00. | |
| initialStartTime | string | Initial startting time for the calendar. Defaults to 00:00. | |
| inputHelpText | string | Help text for input label. | |
| inputId | string | Custom id for the DateInput. | |
| inputLabel | string | Custom label for the input field. Defaults to either 'Välj period' if the datePicker has a range or 'Välj dag' if its a singular input. | |
| inputName | string | Custom name for the DateInput. Default dateInput. | |
| onBlur | func | onBlur function for the input. | |
| onSet * | func | Callback function when date is set, returns array with date objects. One date object if calendar has no range. Two date objects if calendar has range. | |
| topComponent | element | Custom component to render above the calendar. If custom component needs to handle isOpen prop, pass a function to onOpen prop to be able to control the calendar. |
Accessibility
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.
