Date Range

​

Datum Range komponent är en UI-komponent som tillåter användare att välja ett antal datum från ett kalendergränssnitt, vanligtvis används i formulär eller datainmatningsgränssnitt där användaren behöver ange ett start- och slutdatumintervall.

När en datumintervall komponent läggs till i duk, visar det två kalendergränssnitt sida vid sida. Ett kalendergränssnitt används för att välja startdatum medan den andra används för att välja slutdatum. Användaren kan navigera genom kalendrarna genom att klicka på föregående eller nästa pilar för att flytta till en annan månad, eller genom att klicka på ett specifikt datum för att välja det. De valda datumen kommer att visas i inmatningsfälten.

​

Properties

Datumintervall tillgängliga fastigheter. JavaScript kan skrivas för att läsa eller ändra information om komponenter.

​

Methods

Du kan använda andra komponenter för att styra komponenten. Vi stöder följande två metoder:

• setStartValue

För att ställa in startdatumets värde, till exempel, {{“value1”}}

• setEndValue

För att ange slutdatumets värde, till exempel, {{“value2”}}

• clearValue

För att rensa värdet på den valda komponenten

• validate

För att verifiera att indata informationen är laglig

• clearValidate

Rensa valideringsmeddelandet

​

Händelsehanterare

​

Data

Komponenten har några vanliga data, som kan anropas via {{componentName.propertyName}} i appen.

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

​

Använd ärende

Därefter kommer vi att visa hur man kartlägger data från datakällan till datumintervall och ställa in slutvärdet till dagens datum med en knapp.

​

Steg 1 Lägg till en åtgärd

Låt oss skapa en tabell i REST API som heter promoteCodes, inklusive 6 kolumner: code, id, createdAt, expiredAt, startedAt, updatedAt. Vi kommer att använda startedAt och utgångenAt tid för provanvändning.

Sedan kan vi skapa en ny åtgärd för REST API från åtgärdslistan, listar alla data i promoteCodes och heter restapi1.

Klicka på Save och Run för att aktivera denna åtgärd.

​

Steg 2 Lägg till komponenter

Därefter kan vi addera en date range komponent och en button komponent till duken. För standardvärdet för startdatumet för datumintervall komponent, använder vi den startadeVid tidpunkten för den första befordra koden från resten api data.

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

På samma sätt, för standard slutdatum värde, använder vi utgångna Vid tidpunkten för den första befordra koden från resten api data.

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

Vi har också märkt knappen som “Uppdatera” som visas nedan.

​

Steg 3 Konfigurera komponenten

För button komponenten kan vi konfigurera det så att värdet för slutdatum i date range komponent till dagens datum.

1. I händelsehanteraren Redigera, välj Control component i åtgärd, Välj date range komponenten som du vill uppdatera som mål för händelsen.
2. Välj setEndValue åtgärden och ställ in End date som {{currentUserInfo.updatedAt}}

​

Steg 4 Test

Nu när du klickar på knappen “Uppdatera” bör slutdatumet ändras till dagens datum. När det gäller här har vi 2023-5-6 men det kan vara annorlunda när du testar den.