Components

Datepicker

Datovelgere lar deg velge datoer og perioder.

Examples

Datovelger som "base", "floating" og "ghost"

<Stack>
  <FormControl>
    <DatePicker label="Base" variant="base" />
  </FormControl>
  <FormControl>
    <DatePicker label="Floating" variant="floating" />
  </FormControl>
  <FormControl>
    <DatePicker label="Ghost" variant="ghost" />
  </FormControl>
</Stack>

En datovelger med valg av år

<FormControl>
  <DatePicker 
    label="Avreise" 
    variant="base" 
    showYearNavigation
  />
</FormControl>

En periodevelger

<Stack>
  <FormControl>
    <DateRangePicker 
      variant="base"
      label="Base" 
      startLabel="Avreise" 
      endLabel="Hjemreise" 
      startName="outward" 
      endName="return" 
    />
  </FormControl>
  <FormControl>
    <DateRangePicker 
      variant="floating"
      label="Floating" 
      startLabel="Avreise" 
      endLabel="Hjemreise" 
      startName="outward" 
      endName="return" 
    />
  </FormControl>
  <FormControl>
    <DateRangePicker 
      variant="ghost"
      label="Ghost" 
      startLabel="Avreise" 
      endLabel="Hjemreise" 
      startName="outward" 
      endName="return" 
    />
  </FormControl>
</Stack>