Siirry sisältöön

14.5.0

Beta

DateRangePickerV2

Komponentti ajanjakson syöttämiseen tai valitsemiseen kalenterinäkymästä.

Julkaistu versiossa 13.3.0

API

DateRangePickerV2

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

  • calendarDefaultMonth

    Tyyppi: DatePickerV2Value

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

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    Utility-luokat 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.

  • 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.

  • 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>

    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: true

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

  • 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

  • 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).