Tämä artikkeli esittelee input type=“date”:n käyttöä HTML:ssä sekä käytännön toteutusta.
Kuinka käyttää input type=”date” HTML:ssä?
'Input type='data' voidaan käyttää useilla verkkosivustoilla, kuten terveydenhuollon verkkosivustoilla, lentoyhtiöiden varaussivustoilla, verkkokauppasivustoilla, sosiaalisen verkostoitumisen sivustoilla jne. Päivämäärävalitsimen syntaksi on ilmoitettu alla:
< syöttö tyyppi = 'Päivämäärä' id = '' nimi = '' >
Yllä olevissa koodinpätkissä käytetyt attribuutit ovat:
- Ensinnäkin ' tyyppi ” -attribuutin avulla syöttökenttä voi toimia päivämäärävalitsimena, josta käyttäjä voi valita minkä tahansa päivämäärän.
- Seuraavaksi ' id ”-attribuutti määrittää kyseisen elementin ainutlaatuisuuden. Sitä käyttämällä elementti voidaan valita ja se voi käyttää JavaScript-toimintoa.
- Sen jälkeen ' nimi ”-attribuutti määrittää kyseisen elementin nimen. Se auttaa validointiprosessissa valitun elementin arvon saamiseksi.
Ymmärryksen tason parantamiseksi käymme läpi erilaisia esimerkkejä:
Esimerkki 1: Tyyppi= “date” käyttäminen HTML:ssä
Luo HTML-tiedostoon '
< muodossa >
< etiketti varten = 'Liittymispäivä' > Valitse liittymispäivämääräsi: < / etiketti >
< syöttö tyyppi = 'Päivämäärä' id = 'Liittymispäivä' nimi = 'Liittymispäivä' >
< / muodossa >
Yllä olevassa koodinpätkässä:
- Ensinnäkin '
' -tunnistetta käytetään, johon valedata sijoitetaan ja arvoa ' Liittymispäivä ' on toimitettu ' varten ”-attribuutti. - Seuraavaksi '
' -tunnistetta käytetään arvon '' kanssa Päivämäärä ' sen ' tyyppi ”-attribuutti. - Aseta sen jälkeen arvo ' Liittymispäivä ' kohtaan ' id ”-attribuutti. Aseta myös arvo nimi ”-määrite tarpeen mukaan.
Yllä olevan koodinpätkän suorittamisen jälkeen verkkosivu näyttää tältä:
Yllä oleva gif havainnollistaa, että päivämäärävalitsin on luotu käyttämällä input type= “data” HTML:ssä.
Esimerkki 2: Päivämäärän haku JavaScriptin avulla
Tietojen noutamiseen käyttäjät voivat käyttää JavaScript-toimintoja. Saat paremman käsityksen seuraavasta koodilohkosta:
< -painiketta klikkaamalla = 'retrieveDate()' >Hae päivämäärä< / -painiketta >< käsikirjoitus tyyppi = 'teksti/javascript' >
toiminto retrieveDate ( ) {
oli dateInput = document.getElementById ( 'Liittymispäivä' ) ;
var selectedDate = päivämääräsyöttö. arvo ;
hälytys ( 'Valittu päivämäärä:' + valittu päivämäärä ) ;
}
< / käsikirjoitus >
Yllä olevassa koodinpätkässä:
- Ensinnäkin ' retrieveDate() ' -toiminto luodaan '