Date Picker - BETA

This component is still in a beta phase, and you might encounter bugs when using it. If you encounter anything, please report it to the WARP team: #warp-design-system

A date picker allows the user to select a specific calendar date.

React

released

Vue

unsupported

Elements

unsupported

Android

unsupported

iOS

unsupported

Example

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Usage

Design Guidelines

See Figma: Warp - Components / Date Picker

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system

Frameworks

Import

You can import the component like so:

import {Datepicker} from '@warp-ds/components/react/datepicker';

Props

Required props

name	type	default	notes
label	string		Label shown on the input of the datepicker.
onChange	(day: string) => void		Called with the date when the user makes a selection from the calendar or a changes the input.

Optional Props

name	type	default	notes
value	string		The current selected date.
isDayDisabled	(day: Date) => boolean	noop	Called with the day of an entry in the calendar to determine if the day is disabled.
locale	Locale	Norwegian locale	A date-fns locale object. This enables internationalization in the datepicker such as date formatting and which day a week starts on. See date fns documentation.
phrases	Phrases		An object of translation strings used by the datepicker for accessibility.
displayFormat	string		A date-fns format string for the input. See date fns documentation.
monthFormat	string		A date-fns format string for the month. See date fns documentation.
weekDayFormat	string		A date-fns format string for the weekday. See date fns documentation.
dayAriaLabelFormat	string		A date-fns format string for a day. Used for screen readers together with phrases. See date fns documentation.

Example

function DatePickerExample() {

    return <DatePicker
        label="Dato"
        onChange={setValue}
    />;
}