Den här artikeln visar användningen av inmatningstypen=“datum” i HTML tillsammans med den praktiska implementeringen.
Hur använder man input type=”date” i HTML?
'Input type='data'' kan användas på olika webbplatser, som sjukvårdswebbplatser, flygbolagsbokningswebbplatser, e-handelswebbplatser, sociala nätverkssajter, etc. Syntaxen för datumväljaren anges nedan:
< inmatning typ = 'datum' id = '' namn = '' >
Attributen som används i ovanstående kodavsnitt är:
- Först, ' typ ”-attributet låter inmatningsfältet fungera som en datumväljare från vilken användaren kan välja vilket datum som helst.
- Därefter ' id ” attribut definierar det unika hos det elementet. Genom att använda det kan elementet väljas och kan tillämpa JavaScript-funktionalitet.
- Efter det kommer ' namn ” attribut anger namnet på det elementet. Det ger hjälp i processen för validering för att få värdet av det valda elementet.
För att öka förståelsen, låt oss gå igenom olika exempel:
Exempel 1: Använder typ= 'datum' i HTML
I HTML-filen skapar du en ' ” taggen för att skapa en formulärbehållare och infoga följande kodrad:
< form >
< märka för = 'joinDate' > Välj datum för medlemskap: < / märka >
< inmatning typ = 'datum' id = 'joinDate' namn = 'joinDate' >
< / form >
I kodavsnittet ovan:
- Först, '
'-taggen används i vilken dummy-data placeras och värdet på ' joinDate ' har lämnats till ' för ' attribut. - Därefter '
'-taggen används med värdet ' datum 'till sin' typ ' attribut. - Efter det ställer du in värdet på ' joinDate ' till ' id ' attribut. Ställ också in värdet för ' namn ” attribut efter behov.
Efter exekveringen av ovanstående kodavsnitt ser webbsidan ut så här:
Ovanstående gif illustrerar att datumväljaren har skapats med input type= 'data' i HTML.
Exempel 2: Hämta datum med JavaScript
För att hämta data kan användare använda JavaScript-funktioner. För en bättre förståelse, besök kodblocket nedan:
< knapp onclick = 'retrieveDate()' >Hämta datum< / knapp >< manus typ = 'text/javascript' >
funktion retrieveDate ( ) {
var dateInput = document.getElementById ( 'joinDate' ) ;
var selectedDate = datuminmatning. värde ;
varna ( 'Valt datum:' + valt datum ) ;
}
< / manus >
I kodavsnittet ovan:
- Först, ' retrieveDate() '-funktionen skapas i '