- Datum
🧬 Montera komponenter
Datum
ContributeVad är datum?
Datumkomponenten är en komponent som tillåter användare att välja ett datum från ett kalendergränssnitt. Datumkomponenten används vanligtvis i formulär eller datainmatningsgränssnitt där användaren behöver välja ett specifikt datum.
När en Datumkomponent läggs till i duken, visar det ett kalendergränssnitt som standard. Användaren kan navigera genom kalendern 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. Det valda datumet visas i inmatningsfältet.
Properties
Datum tillgängliga fastigheter. JavaScript kan skrivas för att läsa eller ändra information om komponenter.
| Egenskaper | Beskrivning |
|---|---|
| Förvalt värde | Det initiala värdet av komponenten. Du kan dynamiskt ändra initialvärdet genom att skriva JavaScript i {{}}. |
| Formatera | En giltig datumformatsträng. Se dayJS. |
| Platshållare | Värdet kommer att visas när inmatningsfältet är tomt. |
| Max datum | ange det högsta datum som en användare kan välja från kalendergränssnittet. |
| Minsta datum | ange det tidigaste datum som en användare kan välja från kalendergränssnittet. |
| Etikett | Namnet på fältet som visas för användaren |
| Bildtext | En text som används för att beskriva fältet i detalj |
| Dold etikett | Ange om etiketten ska visas |
| Befattning | Ställ in positionen för etiketten i förhållande till komponenten |
| Justering | Ange justering (anpassa till vänster eller höger) på etiketten |
| Width | När etiketten är på vänster sida av komponenten, ställ in breddförhållandet på etiketten. |
| Händelsehanterare | Utlösa frågor, styra komponenter, eller ringa andra API:er som svar på komponenthändelser. |
| Inaktiverad | Kontrollera status för om komponenten är inaktiverad. Komponenten kan inte ändras eller fokuseras när den är inaktiverad. |
| Läs endast | Kontrollera status på om komponenten är skrivskyddad. En skrivskyddad komponent kan väljas och fokuseras men kan inte ändras. |
| Verktygstips | Användare kan ange komponenten verktygstips här. Verktygstipen kommer att visas när den är fokuserad. Markdown format stöds. |
| Visa tydlig knapp | kontrollera om en tydlig knapp visas i inmatningsfältet |
| Obligatoriskt fält | Gäller endast när strömbrytaren är aktiverad. |
| Anpassad regel | Skapa din valideringslogik här. Reglerna ska göras i JavaScript och omfattas av {{}}. |
| Dölj valideringsmeddelande | Du kan dölja felmeddelandet genom att byta dold status när inmatningsvärdet är felaktigt. Du kan dynamiskt ändra den dolda statusen med JavaScript. |
| Formulär dataknapp | Ange en nyckel till en omslagningsformulärkomponent när du konstruerar data-attributet. |
| Hidden | Styr dynamiskt om komponenten är dold. Du kan ändra den dolda statusen genom dynamiskt booleskt värde. |
| Tema färg | Tillåter användare att ange knappens bakgrundsfärg och opacitet |
Methods
Du kan använda andra komponenter för att styra komponenten. Vi stöder följande fyra metoder:
- setValue
För att ange värdet för indatum, till exempel, {{‘value1’}}
| Egenskaper | Beskrivning |
|---|---|
| Värde | Input value |
- 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
| Händelse | Beskrivning |
|---|---|
| Ändra | När en användare ändrar det valda datumvärdet, utför specifika åtgärder som anpassats av användare. |
Data
Komponenten har några vanliga data, som kan anropas via {{componentName.propertyName}} i appen.
| Egenskapens namn | Beskrivning |
|---|---|
| colorScheme | färgen egenskap av datum |
| standardregel | den anpassade regeln som användaren angav |
| datumformat | formatet av datum |
| inaktiverad | ett booleskt värde anger inaktiverad status |
| visningsnamn | namnet på denna komponent (dvs knapp1) |
| formDataKey | formulärdataknappen för datum |
| hidden | dold status (sant eller falskt) |
| Göm valideringsmeddelande | ett booleskt värde anger om valideringsmeddelandet är dolt |
| etikett | etikett värde |
| etikettJustera | justering av switch etikett (vänster eller höger) |
| etikettPosition | positionen för växlingsetikett (vänster eller höger) |
| etikettBredd | heltal som representerar bredden av etikett. |
| etikettFullt | ett booleskt värde anger om etiketten är full. |
| maxDate | värdet av maximalt datum |
| minDate | värdet av lägsta datum |
| platshållare | Platshållarens värde |
| readOnly | ett booleskt värde anger status readyOnly för indata. |
| obligatorisk | ett booleskt värde anger status som krävs för inmatning. |
| visaRensa | ett booleskt värde anger om datumet kommer att visas tydligt |
| tooltipText | värdet av verktygstips text |
| värde | Input value |
Exempel: {{date1.value}}
Använd ärende
Därefter kommer vi att visa hur man kartlägger data från datakällan hittills och ställa in till aktuellt 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 uppdateradeVid 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 komponent och en button komponent till duken. För standardvärdet för datumkomponenten ställer vi in det som den sista uppdateringstiden för första främja kod från resten api data.
{{restapi1.data.promoteCodes[0].updatedAt}}Vi har också märkt knappen som “idag” som visas nedan
Steg 3 Konfigurera komponenten
För button komponenten kan vi konfigurera den så att datumet anges i date komponent till dagens datum.
- I händelsehanteraren Redigera, välj
Control componenti åtgärd, väljdatekomponenten som du vill uppdatera som mål för händelsen. - Välj
setValueåtgärden och ange värdet som{{currentUserInfo.updatedAt}}
Steg 4 Test
Nu när du klickar på “idag” knappen, bör tiden ä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.
