Tento článok demonštruje použitie input type='date' v HTML spolu s praktickou implementáciou.
Ako používať typ vstupu = 'dátum' v HTML?
Input type=‘data’“ možno použiť na rôznych webových stránkach, ako sú webové stránky zdravotnej starostlivosti, webové stránky s rezerváciou leteckých spoločností, webové stránky elektronického obchodu, webové stránky sociálnych sietí atď. Syntax nástroja na výber dátumu je uvedená nižšie:
< vstup typu = 'dátum' id = '' názov = '' >
Atribúty použité vo vyššie uvedených útržkoch kódu sú:
- Po prvé, „ typu ” umožňuje, aby vstupné pole fungovalo ako výber dátumu, z ktorého si používateľ môže vybrať ľubovoľný dátum.
- Ďalej, „ id ” definuje jedinečnosť tohto prvku. Pomocou tohto prvku je možné vybrať prvok a použiť funkciu JavaScriptu.
- Potom sa „ názov ” určuje názov tohto prvku. Poskytuje pomoc v procese overovania na získanie hodnoty vybraného prvku.
Aby sme zvýšili úroveň porozumenia, prejdime si rôzne príklady:
Príklad 1: Použitie type= “dátum” v HTML
V súbore HTML vytvorte súbor „ ” na vytvorenie kontajnera formulára a vložte nasledujúci riadok kódu:
< formulár >
< štítok pre = 'pridať dátum' > Vyberte dátum pripojenia: < / štítok >
< vstup typu = 'dátum' id = 'pridať dátum' názov = 'pridať dátum' >
< / formulár >
Vo vyššie uvedenom útržku kódu:
- Po prvé, „ <štítok> Používa sa značka “, do ktorej sú umiestnené fiktívne údaje a hodnota “ pridať dátum “ bol poskytnutý “ pre “.
- Ďalej, „
Značka ” sa používa s hodnotou “ dátum “na jeho” typu “. - Potom nastavte hodnotu „ pridať dátum “ na “ id “. Tiež nastavte hodnotu „ názov ” atribút podľa potreby.
Po vykonaní vyššie uvedeného útržku kódu bude webová stránka vyzerať takto:
Vyššie uvedený gif ilustruje, že výber dátumu bol vytvorený pomocou input type= “data” v HTML.
Príklad 2: Obnovenie dátumu pomocou JavaScriptu
Na získanie údajov môžu používatelia využiť funkcie JavaScriptu. Pre lepšie pochopenie navštívte nižšie uvedený blok kódu:
< tlačidlo po kliknutí = 'retrieveDate()' >Získať dátum< / tlačidlo >< skript typu = 'text/javascript' >
funkcia retrieveDate ( ) {
bol dateInput = document.getElementById ( 'pridať dátum' ) ;
var selectedDate = dateInput. hodnotu ;
upozorniť ( 'Vybraný dátum: ' + vybraný dátum ) ;
}
< / skript >
Vo vyššie uvedenom útržku kódu:
- Po prvé, „ retrieveDate() Funkcia “ je vytvorená vo vnútri “