- Päivämäärä
🧬 kootut osat
Päivämäärä
ContributeMikä on päiväys?
Päivämäärä komponentti on komponentti, jonka avulla käyttäjät voivat valita päivämäärän kalenterin käyttöliittymä. Päivämäärän osaa käytetään tyypillisesti lomakkeissa tai tietojen syöttämisen rajapinnoissa, joissa käyttäjän on valittava tietty päivämäärä.
Kun päivämäärä komponentti on lisätty kankaalle, se näyttää kalenterin käyttöliittymä oletuksena. Käyttäjä voi navigoida kalenterin läpi klikkaamalla edellistä tai seuraavaa nuolia siirtyäksesi toiseen kuukauteen, tai napsauttamalla tiettyä päivämäärää valitaksesi sen. The selected date will be displayed in the input field. (Automatic Copy)
Properties
Päivän käytettävissä olevat ominaisuudet. Javascript voidaan kirjoittaa lukemaan tai muuttamaan tietoja komponenteista.
| Ominaisuudet | Kuvaus |
|---|---|
| Oletus arvo | Tämän komponentin alkuperäinen arvo. Voit muuttaa alkuperäistä arvoa dynaamisesti kirjoittamalla JavaScriptin {{}}. |
| Muoto | Voimassa oleva päivämäärän muoto merkkijono. Ks. päiväJS. |
| Paikkamerkki | Arvo näytetään, kun syöttökenttä on tyhjä. |
| Maksimi päivämäärä | asettaa enimmäispäivämäärän, jonka käyttäjä voi valita kalenterin käyttöliittymästä. |
| Minimi päivämäärä | täsmennettävä aikaisin päivämäärä, jonka käyttäjä voi valita kalenterin käyttöliittymästä. |
| Tunniste | The name of the field displayed to the user |
| Kuvateksti | Kuvateksti, jota käytetään kuvaamaan kenttää yksityiskohtaisesti |
| Piilotettu etiketti | Määritä näytetäänkö nimike |
| Sijainti | Set the position of the label relative to the component |
| Tasaus | Aseta merkin kohdistus (kohdistus vasemmalle tai oikealle) |
| Width | Kun merkki on tämän osan vasemmalla puolella, ilmoitetaan merkin leveyden suhde. |
| Tapahtuman Käsittely | Käynnistää kyselyt, hallita komponentteja tai soittaa muita API vastauksena komponenttitapahtumia. |
| Pois Käytöstä | Säädä tilaa, jossa osa on pois päältä. Komponenttia ei voi muokata tai tarkentaa, kun se on poistettu käytöstä. |
| Vain Luettu | Säädä tilaa, onko komponentti vain luku -tilassa. Vain luku -komponentti voidaan valita ja tarkentaa, mutta sitä ei voi muokata. |
| Työkaluvihje | Käyttäjät voivat syöttää osan työkaluvihjeen tähän. Työkaluvihje näytetään kun se on kohdistettu. Markdown-muoto on tuettu. |
| Näytä tyhjennyspainike | säätää, näkyykö syöttökentässä tyhjä painike vai ei |
| Vaadittu kenttä | Voimassa vain kun kytkin on päällä. |
| Mukautettu sääntö | Luo validointilogiikka täällä. Sääntöjen tulee olla JavaScriptissä ja ne tulee kattaa {{}}. |
| Piilota vahvistusviesti | Voit piilottaa virheilmoituksen vaihtamalla piilotetun tilan kun syöte on virheellinen. Voit dynaamisesti muuttaa piilotettua tilaa JavaScriptillä. |
| Lomakkeen Dataavain | Määritä käärintälomakkeen komponentin avain, kun määrite rakennetaan. |
| Hidden | Määritä dynaamisesti onko komponentti piilotettu. Voit muuttaa piilotettua tilaa dynaamisen boolean-arvon kautta. |
| Teeman Väri | Salli käyttäjien määrittää painikkeen taustaväri ja läpinäkyvyys |
Methods
Voit käyttää muita komponentteja komponentin ohjaamiseen. Kannatamme seuraavia neljää menetelmää:
- setValue
Määrittääksesi syöttöpäivämäärän arvon, esimerkiksi, {{‘value1’}}
| Ominaisuudet | Kuvaus |
|---|---|
| Arvo | Input value |
- clearValue
Poista valitun komponentin arvo
- validate
Varmistetaan, että syöttötiedot ovat laillisia
- **kirjoita
Vahvistusviestin tyhjentämiseksi
Tapahtuman käsittelijä
| Tapahtuma | Kuvaus |
|---|---|
| Muuta | Kun käyttäjä muuttaa valitun päivämäärän arvoa, suorita käyttäjän räätälöimä toiminto. |
Tiedot
Komponentilla on joitakin yleisesti käytettyjä tietoja, joita voidaan soittaa sovelluksen kautta {{componentName.propertyName}} .
| Ominaisuuden nimi | Kuvaus |
|---|---|
| Väriteema | päivämäärän värillinen ominaisuus |
| customRule | mukautettu sääntö, jonka käyttäjä määritti |
| dateFormaatti | päivämäärän muoto |
| poistettu käytöstä | a Boolean arvo ilmaisevat käytöstä poistetun tilan |
| näyttönimi | tämän komponentin nimi (ts. painike1) |
| formDataKey | Päivämäärän tietolomakkeen tietoavain |
| hidden | piilotila (tosi tai epäto) |
| piiloValidointiViesti | a Boolean arvo ilmaisee, onko validointiviesti piilotettu |
| nimike | tunnisteen arvo |
| labelAlign | kytkimen etikettien kohdistus (vasemmalle tai oikealle) |
| labelPosition | kytkimen etiketti asento (vasemmalle tai oikealle) |
| labelLeveys | kokonaisluku, joka edustaa etiketin leveyttä. |
| tarraTäynnä | a Boolean arvo ilmaisee, onko merkki täynnä. |
| maxDate | enimmäispäivämäärän arvo (maximum date |
| minDate | vähimmäispäivän arvo (minimum date ) |
| paikkamerkki | paikanmerkin arvo |
| Vain luku | a Boolean arvo ilmaisee vain syötteen tilan. |
| vaadittu | a Boolean arvo ilmaisee vaaditun syötteen tilan. |
| näytä Tyhjennä | a Boolean arvo ilmaisee, mitä päivämäärä näytetään selvästi |
| tooltipText | työkaluvihjeen tekstin arvo |
| arvo | Input value |
Esimerkki: {{date1.value}}
Käytä laatikkoa
Seuraavaksi osoitamme, miten tiedot voidaan kartoittaa tietolähteestä tähän mennessä ja asettaa nykyiseen päivämäärään painikkeella.
Vaihe 1 Lisää toiminto
Luodkaamme taulukko REST APIin nimellä promoteKoodit, sisältäen 6 saraketta: code, id, createdAt, expiredAt, startedAt, updatedAt. Käytämme päivitettynäAjankohtana, jolloin näytettä käytetään.
Sitten voimme luoda uuden toimen REST API toimintaluettelosta, jossa luetellaan kaikki tiedot promoteCodes ja nimetty restapi1.
Napsauta Tallenna ja Suorita aktivoidaksesi tämän toiminnon.
Vaihe 2 Lisää Komponentit
Seuraavaksi voimme lisätä kanavaan date komponentin ja button komponentin. Oletusarvoon päivämäärä komponentti, me asetamme sen kuin viimeinen päivitys aika ensimmäisen mainostaa koodia loput api tiedot.
{{restapi1.data.promoteCodes[0].updatedAt}}Merkitsimme myös nappin “Tänään” alla esitetyllä tavalla
Vaihe 3 Määritä komponentti
button -komponentin osalta voimme määrittää sen asettamalla päivämäärän date -komponentin tämän päivän aikana.
- Valitse Edit event handlerissa
Control componenttoiminnassa, valitsedatekomponentti jonka haluat päivittää tapahtuman kohteeksi. - Valitse
setValuetoiminto ja aseta arvo{{currentUserInfo.updatedAt}}
Vaihe 4 Testi
Nyt kun klikkaa “tänään” painiketta, aika pitäisi muuttaa tämän päivän päiväksi. Mitä täällä, meillä on 2023-5-6, mutta se voi olla erilainen, kun testaat sitä.
