Datepicker

Date pickers allow you to select dates and periods.

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>

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>