Skip to content
Vy logo
  • Spor
  • Resources
Components

Datepicker

Date pickers allow you to select dates and periods.

FigmaGitHub

Code examples

DatePicker as "base," "floating," and "ghost."

<Stack>
  <form>
    <DatePicker size="sm" label="Core" variant="core" />
  </form>
  <form>
    <DatePicker label="Floating" variant="floating" />
  </form>
  <form>
    <DatePicker label="Ghost" variant="ghost" />
  </form>
</Stack>

Guidelines

Date pickers help users select a date in a visual and user-friendly way.

There are two types:

  • DatePicker: Allows users to select a single date.
  • DateRangePicker: Allows users to select a date range.

Variants

There are two different design variants: simple and with-trigger.

  • Simple: Features an icon on the left and opens the calendar when clicked (or when Enter is pressed while focused). It works well on larger screens, such as laptops or spacious mobile designs.
  • With-trigger: Has a separate button on the right to open the calendar. This design works well on smaller screens or in compact layouts.

The choice of variant depends on the design and the available screen space.

Code

<DatePicker />

import { DatePicker } from "@vygruppen/spor-react";

Lets the user pick a date with a custom UI

Props

Name
Type
Required?
Description
labelstring
variant"base" | "floating" | "ghost"
minValueDateValueThe DateValue type comes from the `@international/date` library
maxValueDateValueThe DateValue type comes from the `@international/date` library
isDateUnavailable(date: DateValue) => booleanFunction that decides whether a date is unavailable
valueDateValueThe chosen date. The DateValue type comes from the `@international/date` library. Must be used with the `onChange` prop
defaultValueDateValueThe DateValue type comes from the `@international/date` library
onValueChange(date: DateValue) => voidCallback for when the date changes. The DateValue type comes from the `@international/date` library
showYearNavigationbooleanLets the user navigate between years
positioningPositioningOptionsDifferent options for positon. Placement can be set to "left", "right", "top", "bottom"

<DateRangePicker />

import { DateRangePicker } from "@vygruppen/spor-react";

Lets you choose a period between two dates.

Props

Name
Type
Required?
Description
labelstringThe label for both fields
startLabelstringThe label over the start date
startNamestringThe `name` attribute of the input field for the start date.
endLabelstringThe label over the end date
endNamestringThe `name` attribute of the input field for the end date.
variant"base" | "floating" | "ghost"
minValueDateValueThe DateValue type comes from the `@internationalized/date`-library
maxValueDateValueThe DateValue type comes from the `@internationalized/date`-library
isDateUnavailable(date: DateValue) => boolean;Function that decides whether or not a date is unavailable
value{ start: DateValue | null; end: DateValue | null }The chosen date (The DateValue type comes from the `@international/date`-library). Must be used with the `onChange` prop
defaultValue{ start: DateValue | null; end: DateValue | null }The DateValue type comes from the `@international/date` library
onValueChange(dates: { start: DateValue | null; end: DateValue | null }) => void;Callback for når datoene endres. DateValue fra `@international/date`-biblioteket
positioningPositioningOptionsDifferent options for positon. Placement can be set to "left", "right", "top", "bottom"