DateRangePickerV2

React API

DateRangePickerV2

fromRef ja toRef -propit välitetään komponentin input-elementeille.

• animateCalendar

  Tyyppi: boolean

  Näyttää CSS-transition siirryttäessä kalenterin kuukausien välillä.

• calendarDefaultMonth

  Tyyppi: DatePickerV2Value

  Kuukausi, johon kalenteri aukeaa (Date-objekti tai tekstimuotoinen arvo YYYY-MM).

• children

  Tyyppi: ReactNode

  Komponentin sisältö

• className

  Tyyppi: string

  CSS-apuluokat ulkoasun muokkaamiseen.

• defaultValue

  Tyyppi: DateRangePickerV2Value

  Päivämäärävälin valinnan oletusarvo

• disablePast

  Tyyppi: boolean

  Estää kuluvaa päivää aiemman valinnan.

• disabled

  Tyyppi: boolean

  Estetty kenttä

• disabledDates

  Tyyppi: DatePickerV2DisabledDates[]

  Päivämäärät, joiden valinta on estetty.

• errorText

  Tyyppi: string | DateRangePickerV2ErrorText[]

  Kentän virheilmoitusteksti

• fixedCalendarHeight

  Tyyppi: boolean

  Oletusarvo: true

  Näyttää kalenterissa aina 6 viikkoa, jotta sen korkeus ei muutu kuukautta vaihdettaessa.

• fromAttrs

  Tyyppi: DateRangePickerV2InputAttrs

  Komponentin ensimmäiselle input-elementille välitettävät attribuutit.

• fromDate

  Tyyppi: DatePickerV2Value

  Päivämäärä, josta alkaen valintoja voidaan tehdä (Date-objekti tai tekstimuotoinen arvo YYYY-MM-DD).

• fromInputTestId

  Tyyppi: string

  Komponentin ensimmäisen input-kentän data-testid-attribuuttiin välitettävä arvo testausta varten

• fromRef

  Tyyppi: MutableRefObject<HTMLInputElement> | ((instance: HTMLInputElement) => void)

  Komponentin ensimmäiselle input-elementille välitettävä ref

• fromRequired

  Tyyppi: boolean

  Oletusarvo: false

  Tekee alkamispäivämäärästä pakollisen.

• helpText

  Tyyppi: string

  Kentän täyttöohje, joka näytetään kentän yläpuolella.

• helpers

  Tyyppi: ReactNode

  Input-kenttien yläpuolelle tulostettavat räätälöidyt toiminnot. Huom! Sisältöjä ei lueta ruudunlukijalle kohdistuksen ollessa input-kentässä.

• id

  Tyyppi: string

  Päivämäärän valintakentän (input) id. Alkamispäiväkentän id:n perään asetetaan -from ja päättymispäiväkentän id:n perään -to.

• infoText

  Tyyppi: string

  Kentän aputeksti, joka näytetään kentän alapuolella.

• invalid

  Tyyppi: { from?: boolean; to?: boolean; }

  Virheellisen kentän korostus

• labelText

  Tyyppi: ReactNode

  Kentän nimilappu

• leftCol

  Tyyppi: (children: ReactNode) => ReactElement<any, string | JSXElementConstructor<any>>

  Vasen palsta

• localization

  Tyyppi: Partial<DateRangePickerV2Localization> & Partial<DatePickerV2Localization>

  Kalenterinäkymän lokalisointi

• onBlur

  Tyyppi: (event: FocusEvent<HTMLInputElement, Element>, validity?: DateRangeValidationResult) => void

  Callback-funktio, jota kutsutaan kun kohdistus siirtyy pois input-kentästä. Parametreina FocusEvent ja DateRangeValidationResult.

• onCalendarClose

  Tyyppi: (dateRangeValue: DateRangePickerV2InputValue, validity?: DateRangeValidationResult) => void

  Callback-funktio, jota kutsutaan kun kalenteri suljetaan. Parametreina input-kentän arvo ja DateRangeValidationResult.

• onChange

  Tyyppi: (dateRangeValue: DateRangePickerV2InputValue, validity?: DateRangeValidationResult) => void

  Callback-funktio, jota kutsutaan input-kentän arvon muuttuessa. Parametreina input-kentän arvo ja DateRangeValidationResult.

• onError

  Tyyppi: (dateRangeValue: DateRangePickerV2InputValue, validity?: DateRangeValidationResult) => void

  Callback-funktio, jota kutsutaan vain virhetilanteessa. Parametreina input-kentän arvo ja DateRangeValidationResult.

• onSelect

  Tyyppi: (dateRangeValue: DateRangePickerV2InputValue, validity?: DateRangeValidationResult) => void

  Callback-funktio, jota kutsutaan kun päivämäärä valitaan kalenterista. Parametreina input-kenttään päivittyvä arvo ja DateRangeValidationResult.

• placeholder

  Tyyppi: string

  Oletusarvo: pp.kk.vvvv

  Input-kentän placeholder-teksti

• renderInputs

  Tyyppi: ({ FromInput, ToInput, fromInputProps, toInputProps, calendarButton, }: DateRangePickerV2RenderProps) => ReactElement<any, string | JSXElementConstructor<any>>

  Päivämäärävälin valinnan input-elementtien render-funktio

• required

  Tyyppi: boolean

  Oletusarvo: false

  Pakollisen kentän korostus.

• requiredLabel

  Tyyppi: string

  "Pakollinen tieto" -teksti ruudunlukijalle.

• showDropdownNavigation

  Tyyppi: boolean

  Näyttää kalenterinäkymässä vuosi- ja kuukausivalinnat alasvetovalikossa (Huom! Vaatii, että fromDate ja toDate -propeille on asetettu arvot rajoittamaan valintojen määrää).

• showLeadingZeros

  Tyyppi: boolean

  Oletusarvo: false

  Hallitsee etunollien näyttämistä input-kenttään asetetussa päivämääräarvossa (1.1.2023 vs. 01.01.2023). Oletuksena etunollia ei näytetä.

• showWeekNumbers

  Tyyppi: boolean

  Näyttää viikkonumerot kalenterissa.

• size

  Tyyppi: "xs" | "sm" | "md"

  Oletusarvo: md

  Mukautettu komponentin kokoluokka

• testId

  Tyyppi: string

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

• toAttrs

  Tyyppi: DateRangePickerV2InputAttrs

  Komponentin toiselle input-elementille välitettävät attribuutit.

• toDate

  Tyyppi: DatePickerV2Value

  Päivämäärä, johon asti valintoja voidaan tehdä (Date-objekti tai tekstimuotoinen arvo YYYY-MM-DD).

• toInputTestId

  Tyyppi: string

  Komponentin toisen input-kentän data-testid-attribuuttiin välitettävä arvo testausta varten

• toRef

  Tyyppi: MutableRefObject<HTMLInputElement> | ((instance: HTMLInputElement) => void)

  Komponentin toiselle input-elementille välitettävä ref

• value

  Tyyppi: DateRangePickerV2InputValue

  Päivämäärävalinnan arvo tekstimuodossa kun käytetään kontrolloituna komponenttina (pp.kk.vvvv).