Tid velger

​

Tidsvelgerkomponent er en UI komponent som lar brukere velge et bestemt klokkeslett fra et 24-timers grensesnitt, som vanligvis brukes i form eller innkjøringsgrensesnitt der brukeren trenger å spesifisere et bestemt tidsrom.

Når en tid-velger komponent er lagt til lerretet, vises det et grensesnitt over 24 timer som viser timer, minutter, og sekunder. Brukeren kan justere tiden ved å bevege musepekeren eller ved å bruke pilene opp og ned.

​

Properties

Tilgjengelige tidsvelgere. JavaScript kan skrives til å lese eller endre informasjon om komponenter.

​

Methods

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

• setValue

For å angi den inngående tidsverdien, for eksempel, {{“value1”}}

• 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: {{timePicker1.format}}

​

Bruk kasse

Deretter vil vi vise hvordan vi skal kartlegge dataene fra datakilden til tidsvelgeren og sette 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 vil benytte oss av oppdateringen på tide til bruk i eksempel.

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 tid-velger-komponent og en knappen** komponent til lerretet. For standardverdien for den tidskomponenten setter vi det opp som siste oppdateringstidspunkt for den første koden fra resten av API-dataene.

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

Vi merket også knappen som “nå” som vist nedenfor

​

Trinn 3 Konfigurere komponenten

For knappen komponenten, kan vi konfigurere den for å stille datoen inn time picker komponenten til gjeldende dato og klokkeslett.

1. I Redigeringshendelsesbehandleren velger du Kontrollkomponent i aksjonen, velg time picker komponenten som du vil oppdatere når målet til hendelsen.
2. Velg setValue handlingen og angi verdien som {{currentUserInfo.updatedAt}}

​

Trinn 4 Prøving

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