Date Range

​

DatoRange komponent er en UI komponent som tillater brukere å velge en rekke datoer fra et kalendergrensesnitt, som typisk brukes i form eller innkjøringsgrensesnitt der brukeren trenger å spesifisere en start- og sluttdatointervall.

Når en datointervall-komponent er lagt til lerretet, viser den to kalendergrensesnitt side om side. Én kalendergrensesnitt brukes til å velge startdato, mens den andre brukes til å velge sluttdato. Brukeren kan navigere gjennom kalenderne ved å klikke på forrige eller neste piler for å gå til en annen måned, eller ved å klikke på en bestemt dato for å velge den. De valgte datoene vil vises i inndatafeltene.

​

Properties

Tilgjengelige egenskaper for datoutvalg JavaScript kan skrives til å lese eller endre informasjon om komponenter.

​

Methods

Du kan bruke andre komponenter til å kontrollere komponenten. Vi støtter følgende to metoder:

• setStartValue

For å angi startdato verdi for eksempel, {{“value1”}}

• **setEndverdi

For å angi sluttdatoverdien, for eksempel, {{“value2”}}

• clearValue

For å fjerne verdien for den valgte komponenten

• validate

For å verifisere at inndatainformasjonen er juridisk

• clearValidate

For å fjerne valideringsmeldingen

​

Arrangement behandler

​

Data

Komponenten har noen vanlig brukte data, som kan kalles via {{componentName.propertyName}} i appen.

Eksempel: {{dateRange1.value[0]}}

​

Bruk kasse

Så vil vi vise hvordan vi skal kartlegge dataene fra datakilden til datoperiode og angi en verdi til dagens dato med en knapp.

​

Trinn 1 Legg til en handling

La oss lage en tabell i REST API kalt promoteCodes , inkludert 6 kolonner: code, id, createdAt, expiredAt, **startedAt, updatedAt. Vi benytter oss av startAt og utløper tid til prøvebruk.

Da kan vi opprette en ny handling for REST API fra handlelisten, som viser alle data i promoteringskoder og navngitt restapi1.

Klikk Lagre og Kjør for å aktivere denne handlingen.

​

Trinn 2 Legg til komponenter

Deretter kan vi legge til en date range-komponent og en knapp** komponent til lerretet. For standard startdato for datointervall-komponenten, benytter vi startpunktet for første kode fra resten av API-dataene.

{{restapi1.data.promoteCodes[0].startedAt}}

På samme måte er det for standardverdien til sluttdato som vi bruker utløper på tidspunktet for første fremme kode i resten av API-dataene.

{{restapi1.data.promoteCodes[0].expiredAt}}

Vi merket også knappen som ‘Oppdater’ som vist nedenfor.

​

Trinn 3 Konfigurere komponenten

For den knappen komponenten, kan vi konfigurere den for å sette sluttdato-verdien i dato-intervall komponenten til dagens dato.

1. I Redigeringshendelsesbehandleren velger du Kontrollkomponent i aksjonen, velg `dato-området ** komponenten du vil oppdatere når målet til hendelsen.
2. Velg setEndValue handlingen og angi Sluttdato som {{currentUserInfo.updatedAt}}

​

Trinn 4 Prøving

Nå når du klikker på ‘Oppdater’-knappen, skal sluttdatoen endres til dagens dato. På samme måte som her har vi 2023-5-6, men det kan være noe annerledes når dere tester det.