Hvordan bruger man input type=”date” i HTML?

Det ' input ” element med type=”dato” giver brugerne mulighed for at vælge en dato ved hjælp af en kalender-popup. Det giver en brugervenlig grænseflade til valg af datoer og undgår muligheden for fejl, der kan opstå, når brugere indtaster datoen manuelt. Det giver også en standardiseret måde at indsamle dataoplysninger på, kompatibilitet på tværs af browsere og forbedrer tilgængeligheden, samtidig med at udviklingstiden reduceres.

Denne artikel demonstrerer brugen af input type = 'dato' i HTML sammen med den praktiske implementering.

Hvordan bruger man input type=”date” i HTML?

'Input type='data'' kan bruges på forskellige websteder, såsom sundhedswebsteder, flyselskabers bookingwebsteder, e-handelswebsteder, sociale netværkssider osv. Syntaksen for datovælgeren er angivet nedenfor:

< input type = 'dato' id = '' navn = '' >

De attributter, der bruges i ovenstående kodestykker, er:

For det første ' type ” attribut tillader inputfeltet at fungere som en datovælger, hvorfra brugeren kan vælge en hvilken som helst dato.
Dernæst ' id ” attribut definerer det unikke ved det element. Ved at bruge det kan elementet vælges og kan anvende JavaScript-funktionalitet.
Derefter vil ' navn ” attribut angiver navnet på det element. Det giver hjælp i processen med validering for at få værdien af det valgte element.

For at øge forståelsesniveauet, lad os gennemgå forskellige eksempler:

Eksempel 1: Brug af type= 'dato' i HTML

I HTML-filen skal du oprette en '

” tag til oprettelse af en formularbeholder og indsæt følgende kodelinje:

< form >

< etiket til = 'joinDate' > Vælg din tilmeldingsdato: < / etiket >

< input type = 'dato' id = 'joinDate' navn = 'joinDate' >

< / form >

I ovenstående kodestykke:

For det første ' ' tag bruges, hvor dummy data er placeret og værdien af ' joinDate ' er blevet leveret til ' til ' attribut.
Dernæst ' ' tag bruges med værdien ' dato 'til sin' type ' attribut.
Indstil derefter værdien af ' joinDate ' til ' id ' attribut. Indstil også værdien af ' navn ” attribut efter behov.

Efter udførelsen af ovenstående kodestykke ser websiden sådan ud:

Ovenstående gif illustrerer, at datovælgeren er blevet oprettet ved hjælp af input type= 'data' i HTML.

Eksempel 2: Genfinding af dato ved hjælp af JavaScript

For at hente dataene kan brugere bruge JavaScript-funktionaliteter. For en bedre forståelse, besøg nedenstående kodeblok:

< knap onclick = 'retrieveDate()' >Hent dato< / knap >

< manuskript type = 'tekst/javascript' >

funktion retrieveDate ( ) {

var datoinput = document.getElementById ( 'joinDate' ) ;

var valgt dato = datoindtastning. værdi ;

alert ( 'Valgt dato: ' + valgt dato ) ;

}

< / manuskript >

I ovenstående kodestykke:

For det første ' retrieveDate() '-funktionen oprettes inde i '

Hvordan bruger man input type=”date” i HTML?