React Datepicker

För de flesta användningsfall rekommenderar vi att du använder Midas inbyggda datumkomponenter, då de är fullt integrerade med vårt designsystem och erbjuder god tillgänglighet. Om du däremot behöver en datumväljare med mer avancerade funktioner som inte finns tillgängliga i Midas standardkomponenter, kan du använda det populära tredjepartsbiblioteket React Datepicker. Vi har tillhandahållit stilar för att säkerställa att den matchar Midas utseende och känsla.

Stilarna för React Datepicker är just nu i en tidig version och är ett arbete som pågår. React Datepicker är inte en del av kärnbiblioteket i Midas, vilket innebär att supporten är begränsad. Vi är öppna för kodbidrag till vårt repo och tar gärna emot förslag på stilar som saknas när du implementerar React Datepicker.

När du ska använda React Datepicker

Använd Midas inbyggda datumkomponenter som standard. React Datepicker är ett alternativ när du har specifika behov som kräver dess utökade funktionalitet, såsom:

• Avancerade datumintervall
• Månads- eller årsväljare
• Anpassade datumformat och validering
• Tidsväljare
• Och andra specialfunktioner som inte stöds av Midas standardkomponenter.

Komma igång

För att använda React Datepicker med Midas-stilar måste du först installera de nödvändiga beroendena:

npm install react-datepicker @midas-ds/datepicker-styles date-fns

Importera sedan Midas-stilarna för datumväljaren:

@import '@midas-ds/datepicker-styles/react-datepicker.css';

Midas-stilarna ersätter React Datepickers egna stilar. Importera därför inte react-datepicker/dist/react-datepicker.css samtidigt, eftersom de två stilmallarna då krockar.

Versioner som stöds

@midas-ds/datepicker-styles stödjer react-datepicker version 8 och 9, tillsammans med date-fns version 4. Vi planerar att stödja högst två huvudversioner samtidigt, vilket innebär att stödet för version 8 tas bort när vi stödjer version 10.

Stilarna täcker:

• Inmatningsfält med kalenderikon och rensa-knapp (showIcon, isClearable)
• Popover, inline och withPortal
• Dag-, månads-, kvartals- och årsväljare
• Datumintervall (selectsRange)
• Månads- och årsdropdowns (showMonthDropdown, showYearDropdown)
• Idag-knapp (todayButton)
• Placering av månadsrubriken (monthHeaderPosition, endast version 9)
• Ogiltigt värde (ariaInvalid)

Tidsväljaren (showTimeSelect, showTimeInput) har ännu inga Midas-stilar.

Språkstöd (Locale Support)

React Datepicker använder date-fns för hantering av språk och lokala inställningar. För att lägga till språkstöd, installera önskat språkpaket från date-fns och registrera det med react-datepicker.

import { registerLocale, setDefaultLocale } from 'react-datepicker'
import { sv } from 'date-fns/locale/sv'
registerLocale('sv', sv)
setDefaultLocale('sv')

Användbara länkar

Här är några resurser som hjälper dig att komma igång med React Datepicker:

• React Datepicker GitHub: Officiella GitHub-repot.
• React Datepicker Docs: Den officiella dokumentationen är den bästa platsen att lära sig om alla funktioner och hur man använder dem.

Exempel

Här är ett exempel på en datumväljare byggd med React Datepicker och stylad med Midas:

DatePickerExample.tsx

import { CalendarDays } from 'lucide-react'
import DatePicker from 'react-datepicker'
import { useState } from 'react'
import '@midas-ds/datepicker-styles/react-datepicker.css'

export const DefaultReactDatepickerExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
  return (
    <DatePicker
      showIcon
      selected={selectedDate}
      onChange={(date: Date | null) => setSelectedDate(date)}
      formatWeekDay={date => date[0].toUpperCase()} // Show the weekday as a single capital letter
      toggleCalendarOnIconClick
      icon={<CalendarDays height={20} />}
      showPopperArrow={false}
      dateFormat='dd-MM-yyyy'
      placeholderText='Select a date'
    />
  )
}

Månadsväljare

Här är ett exempel på en månadsväljare byggd med React Datepicker och stylad med Midas:

MonthPickerExample.tsx

const [selectedDate, setSelectedDate] = useState<Date | null>(null)
return (
  <DatePicker
    showPopperArrow={false}
    selected={selectedDate}
    showIcon
    toggleCalendarOnIconClick
    icon={<CalendarDays height={20} />}
    showMonthYearPicker
    onChange={(date: Date | null) => setSelectedDate(date)}
    dateFormat='MM-yyyy'
    placeholderText='Select a date'
  />
)

Ogiltigt värde

React Datepicker har ingen egen validering. Validera värdet själv och sätt ariaInvalid='true' när det är ogiltigt så får fältet samma röda ram som Midas formulärfält. Visa felmeddelandet med Midas FieldError och koppla det till fältet med ariaDescribedBy så att skärmläsare läser upp det.

I exemplet nedan är datumet ogiltigt om det ligger bakåt i tiden.

Startdatum

Datumet kan inte ligga bakåt i tiden

InvalidExample.tsx

const [selectedDate, setSelectedDate] = useState<Date | null>(null)
const error =
  selectedDate && isBeforeToday(selectedDate)
    ? 'Datumet kan inte ligga bakåt i tiden'
    : undefined

return (
  <div style={{ display: 'flex', flexDirection: 'column' }}>
    <Label htmlFor='start-date'>Startdatum</Label>
    <DatePicker
      id='start-date'
      showPopperArrow={false}
      selected={selectedDate}
      showIcon
      toggleCalendarOnIconClick
      icon={<CalendarDays height={20} />}
      onChange={(date: Date | null) => setSelectedDate(date)}
      dateFormat='yyyy-MM-dd'
      placeholderText='ÅÅÅÅ-MM-DD'
      ariaInvalid={error ? 'true' : undefined}
      ariaDescribedBy={error ? 'start-date-error' : undefined}
    />
    {error && (
      <div id='start-date-error'>
        <FieldError isInvalid>{error}</FieldError>
      </div>
    )}
  </div>
)