Tidsintervall

​

Tidsintervall komponent er en UI komponent som lar brukere velge et intervall fra et 24-timers grensesnitt, som vanligvis brukes i form eller innkjøringsgrensesnitt der brukeren trenger å spesifisere en start- og sluttidsperiode.

Når en tidsperiode-komponent er lagt til lerretet, viser den to 24-timers grensesnitt side om side. Ett grensesnitt brukes til å velge starttid, mens den andre brukes til å velge slutttiden. Brukeren kan justere tiden ved å bevege musepekeren eller ved å bruke pilene opp og ned.

​

Properties

Tidsintervall er tilgjengelige egenskaper. 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:

• setStartTime

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

• setEndTime

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: {{rangeTime1.value[0]}}

​

Bruk kasse

Så vil vi vise hvordan vi skal kartlegge data fra datakilden til tidsrom og sette sluttverdi til gjeldende klokkeslett 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 tidstere-komponent og en knapp** komponent til lerretet. For standard starttid for datointervall-komponenten, bruker vi startskuddet for første kode fra resten av API-dataene.

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

På samme måte er det for standard sluttverdi vi bruker utløper på tidspunktet for første fremme kode fra resten av API-dataene.

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

Vi merket også knappen som “Nå” som vist nedenfor.

​

Trinn 3 Konfigurere komponenten

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

1. I Redigeringshendelsesbehandleren velger du Kontrollkomponent i aksjonen, velg time range komponenten du vil oppdatere når målet til hendelsen.
2. Velg setEndTime handlingen og sett Slutttid som {{currentUserInfo.updatedAt}}

​

Trinn 4 Prøving

Nå som når du klikker på “Nå”-knappen, skal sluttiden endres til dagens dato. Her har vi derimot 20:03:05, men det kan være annerledes når man tester det.