Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Datepicker

Date pickers allow you to select dates and periods.

FigmaGitHub

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>

A datePicker with year selection.

<form>
  <DatePicker 
    label="Avreise" 
    variant="core" 
    showYearNavigation
  />
</form>

Example of controlled DateRangePicker. Use '@internationalized/date' to parse dates etc.

// import { parseDate } from '@internationalized/date';

() => {
  const [value, setValue] = React.useState(parseDate("2020-02-03"));
  return (
    <DatePicker
      label="Controlled"
      value={value}
      onValueChange={(date) => setValue(date)}
    />
  );
};

A datepicker with error text, for form validation

<form>
    <DatePicker label="Pick date" invalid errorText="Date is invalid" />
  </form>

Datepicker inherits positioning props from popover. Use this to change default position of calendar. 

<DatePicker
  positioning={{
    placement: "top",
  }}
  label="Opens on top"
/>;

A dateRangePicker

<Stack>
  <form>
    <DateRangePicker 
      variant="core"
      label="Core" 
      startLabel="Avreise" 
      endLabel="Hjemreise" 
      startName="outward" 
      endName="return" 
    />
  </form>
  <form>
    <DateRangePicker 
      variant="floating"
      label="Floating" 
      startLabel="Avreise" 
      endLabel="Hjemreise" 
      startName="outward" 
      endName="return" 
    />
  </form>
  <form>
    <DateRangePicker 
      variant="ghost"
      label="Ghost" 
      startLabel="Avreise" 
      endLabel="Hjemreise" 
      startName="outward" 
      endName="return" 
    />
  </form>
</Stack>

Example of controlled input. Use '@internationalized/date' to parse dates etc.

// import { parseDate } from '@internationalized/date';

() => {
  const [value, setValue] = React.useState({
    start: parseDate("2020-02-03"),
    end: parseDate("2020-02-10"),
  });
  return (
    <DateRangePicker
      label="Controlled DateRangePicker"
      value={value}
      onValueChange={(date) => setValue(date)}
      startLabel="Avreise"
      endLabel="Hjemreise"
    />
  );
};

DatePicker inside modal.

By default DatePicker uses portal to render its popover, but this seems to cause problems in modals. Set withPortal to false

<DialogRoot>
  <DialogTrigger>
    <Button>Open DatePicker in Dialog</Button>
  </DialogTrigger>

  <DialogContent minHeight="50vh">
    <DialogBody>
      <DatePicker withPortal={false} label="Inside Modal" />
    </DialogBody>
  </DialogContent>
</DialogRoot>;

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"