Interval de timp

​

Componenta cu rază de timp este o componentă UI care permite utilizatorilor să selecteze un interval de timp de la o interfață de 24 de ore, De obicei folosit în formulare sau interfețe de intrare de date în cazul în care utilizatorul trebuie să specifice un interval de timp și de început.

Atunci când o componentă Time Range este adăugată la pânză, aceasta afișează două interfețe de 24 de ore una lângă alta. O interfață este folosită pentru a selecta ora de pornire, în timp ce cealaltă interfață este folosită pentru a selecta ora de sfârșit. Utilizatorul poate ajusta timpul mutând cursorul mouse-ului sau folosind săgeţile în sus şi în jos.

​

Properties

Intervalul de timp pentru proprietățile disponibile. JavaScript poate fi scris pentru a citi sau a modifica informații despre componente.

​

Methods

Puteţi utiliza alte componente pentru a controla componenta. Sprijinim următoarele două metode:

• setStartTime

Pentru a seta valoarea datei de începere, de exemplu, {{“value1”}}

• setEndTime

Pentru a seta valoarea datei de încheiere, de exemplu, {{“value2”}}

• clearValue

Pentru a șterge valoarea componentei selectate

• validate

Pentru a verifica dacă informațiile de intrare sunt legale

• clearValidate

Pentru a șterge mesajul de validare

​

Gestionar de evenimente

​

Date

Componenta are niște date utilizate în mod obișnuit, care pot fi apelate prin {{componentName.propertyName}} în aplicație.

Exemplu: {{rangeTime1.value[0]}}

​

Utilizare majusculă

Apoi, vom demonstra cum să cartografiem datele de la sursa de date la intervalul de timp şi să setăm valoarea de sfârşit la ora curentă cu un buton.

​

Pasul 1 Adăugare acţiune

Să creăm un tabel în REST API numit promoteCode, inclusiv 6 coloane: code, id, createdAt, expiredAt, startedAt, updatedAt. Vom folosi începutul și timpul expirat la ora pentru utilizarea eșantionului.

Apoi putem crea o nouă acțiune pentru REST API din lista de acțiuni, enumerând toate datele în promoteCodes și numit restapi1.

Faceţi clic pe Salvează şi Run pentru a activa această acţiune.

​

Pasul 2 Adaugă Componente

Apoi, putem adăuga o componentă interval de timp şi o componentă button la pânză, Pentru valoarea implicită a timpului de pornire al componentei de interval, folosim startedLa momentul primei promovări a codului din restul datelor API.

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

In mod similar, pentru valoarea implicita a orarului de sfarsit, folosim expiratLa momentul primului cod de promovare din restul datelor API.

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

De asemenea, am etichetat butonul ca “Acum” după cum se arată mai jos.

​

Pasul 3 Configurarea componentei

Pentru componenta button, o putem configura pentru a seta valoarea dată de sfârșit în componenta interval de timp la data de astăzi.

1. În gestionarul de editare a evenimentului, selectați Componenta Control în acțiune, selectați componenta interval de timp pe care doriți să o actualizați ca țintă a evenimentului.
2. Alege setEndTime acţiune şi setează Ora de sfârşit ca {{currentUserInfo.updatedAt}}

​

Etapa 4 Test

Acum că atunci când faceți clic pe butonul “Acum”, ora finală ar trebui să se schimbe la data de astăzi. În ceea ce privește aici, avem 20:03:05, dar poate fi diferit când îl testați.