Cet article illustre l'utilisation de l'entrée type = 'date' en HTML ainsi que l'implémentation pratique.
Comment utiliser input type='date' en HTML ?
Le 'type d'entrée = 'données'' peut être utilisé dans divers sites Web, tels que les sites Web de soins de santé, les sites Web de réservation de compagnies aériennes, les sites Web de commerce électronique, les sites de réseaux sociaux, etc. La syntaxe du sélecteur de date est indiquée ci-dessous :
< saisir taper = 'date' identifiant = '' nom = '' >
Les attributs utilisés dans les extraits de code ci-dessus sont :
- Premièrement la ' taper ” permet au champ de saisie d'agir comme un sélecteur de date à partir duquel l'utilisateur peut choisir n'importe quelle date.
- Ensuite, le « identifiant ” L'attribut définit l'unicité de cet élément. En l'utilisant, l'élément peut être sélectionné et peut appliquer la fonctionnalité JavaScript.
- Après cela, le « nom ” L'attribut spécifie le nom de cet élément. Il fournit une aide dans le processus de validation pour obtenir la valeur de l'élément sélectionné.
Pour améliorer le niveau de compréhension, passons en revue différents exemples :
Exemple 1 : Utilisation de type= 'date' en HTML
Dans le fichier HTML, créez un '
< former >
< étiqueter pour = 'joinDate' > Sélectionnez votre date d'adhésion : < / étiqueter >
< saisir taper = 'date' identifiant = 'joinDate' nom = 'joinDate' >
< / former >
Dans l'extrait de code ci-dessus :
- Premièrement la ' <étiquette> La balise ' est utilisée dans laquelle des données factices sont placées et la valeur de ' joinDate » a été fourni au « pour ' attribut.
- Ensuite, le «
” tag est utilisé avec une valeur de “ date ' à son ' taper ' attribut. - Après cela, définissez la valeur de ' joinDate ' au ' identifiant ' attribut. Définissez également la valeur de ' nom ” attribut selon le besoin.
Après l'exécution de l'extrait de code ci-dessus, la page Web apparaît comme ceci :
Le gif ci-dessus illustre que le sélecteur de date a été créé en utilisant input type= 'data' en HTML.
Exemple 2 : Récupération de la date à l'aide de JavaScript
Pour récupérer les données, les utilisateurs peuvent utiliser les fonctionnalités JavaScript. Pour une meilleure compréhension, visitez le bloc de code ci-dessous :
< bouton sur clic = 'récupérerDate()' >Obtenir la date< / bouton >< scénario taper = 'texte/javascript' >
fonction récupérerDate ( ) {
était dateInput = document.getElementById ( 'joinDate' ) ;
var date_sélectionnée = dateInput. valeur ;
alerte ( 'Date sélectionnée : ' + date sélectionnée ) ;
}
< / scénario >
Dans l'extrait de code ci-dessus :
- Premièrement la ' récupérerDate() ' la fonction est créée à l'intérieur du '