Kuidas kasutada HTML-is sisendit type=”date”?

' sisend ” element koos tüüp=”kuupäev” võimaldab kasutajatel valida kalendri hüpikakna abil kuupäeva. See pakub kasutajasõbralikku liidest kuupäevade valimiseks ja väldib vigade võimalust, mis võivad ilmneda kuupäeva käsitsi sisestamisel. See pakub ka standardiseeritud viisi andmete kogumiseks, brauseritevahelise ühilduvuse ja parandab juurdepääsetavust, vähendades samal ajal arendusaega.

See artikkel demonstreerib sisendi type=“date” kasutamist HTML-is koos praktilise rakendamisega.

Kuidas kasutada HTML-is sisendit type=”date”?

„Input type=‘data’” saab kasutada erinevatel veebisaitidel, nagu tervishoiuveebisaidid, lennufirmade broneerimisveebisaidid, e-kaubanduse veebisaidid, suhtlusvõrgustiku saidid jne. Kuupäevavalija süntaks on toodud allpool.

< sisend tüüp = 'kuupäev' id = '' nimi = '' >

Ülaltoodud koodilõikudes kasutatud atribuudid on järgmised:

Esiteks, ' tüüp ” atribuut võimaldab sisestusväljal toimida kuupäevavalijana, mille hulgast kasutaja saab valida mis tahes kuupäeva.
Järgmiseks ' id ” atribuut määrab selle elemendi unikaalsuse. Seda kasutades saab elementi valida ja JavaScripti funktsionaalsust rakendada.
Pärast seda ' nimi ” atribuut määrab selle elemendi nime. See pakub abi valitud elemendi väärtuse saamise valideerimisel.

Arusaadavuse suurendamiseks toome läbi erinevad näited:

Näide 1: Type= “date” kasutamine HTML-is

Looge HTML-failis ' ” silt vormikonteineri loomiseks ja sisestage järgmine koodirida:

< vormi >

< silt jaoks = 'liitumiskuupäev' > Valige oma liitumise kuupäev: < / silt >

< sisend tüüp = 'kuupäev' id = 'liitumiskuupäev' nimi = 'liitumiskuupäev' >

< / vormi >

Ülaltoodud koodilõigul:

Esiteks, ' Kasutatakse märgendit ', millesse paigutatakse näivandmed ja ' liitumiskuupäev ” on esitatud „ jaoks ” atribuut.
Järgmiseks ' ' silti kasutatakse väärtusega ' kuupäeva 'oma' tüüp ” atribuut.
Pärast seda määrake väärtus ' liitumiskuupäev ' juurde ' id ” atribuut. Määrake ka ' nimi ” atribuut vastavalt vajadusele.

Pärast ülaltoodud koodilõigu täitmist näeb veebileht välja selline:

Ülaltoodud gif illustreerib, et kuupäevavalija on loodud HTML-is sisenditüübi = 'data' abil.

Näide 2: Kuupäeva taastamine JavaScripti abil

Andmete hankimiseks saavad kasutajad kasutada JavaScripti funktsioone. Parema arusaamise saamiseks külastage allolevat koodiplokki:

< nuppu onclick = 'retrieveDate()' >Hangi kuupäev< / nuppu >

< stsenaarium tüüp = 'tekst/javascript' >

funktsioon retrieveDate ( ) {

oli dateInput = document.getElementById ( 'liitumiskuupäev' ) ;

var valitudKuupäev = kuupäevSisend. väärtus ;

hoiatus ( 'Valitud kuupäev:' + valitud Kuupäev ) ;

}

< / stsenaarium >

Ülaltoodud koodilõigul:

Esiteks, ' retrieveDate() funktsioon luuakse '' sees

Kuidas kasutada HTML-is sisendit type=”date”?