JavaScript : Comment définir et afficher une date dans un input datetime-local ?

Mis à jour il y a 8 mois

Un tutoriel pour définir et présenter une date dans un élément HTML input de type de datetime-local en utilisant JavaScript.

Commenter

Offrir un café

Auteur

Wilo A.

Domaine

Développement web

Technologies

HTML, JavaScript

🌎 La version anglaise de cette publication : JavaScript : How to define and display a date in a datetime-local input?

Un <input type="datetime-local"> est un type d'entrée HTML qui permet à l'utilisateur de sélectionner à la fois une date et une heure locales dans un formulaire web.

Dans ce tutoriel, nous allons voir comment définir et présenter une valeur pour cet élément en utilisant JavaScript.

Tout d'abord, nous devons placer le champ d'entrée datetime-local sur une page HTML.

<!-- Champ datetime-local -->
<label for="date_input">Indiquez la date et l'heure de l'événement</label>

<input type="datetime-local" name="date_input" id="date_input" >

En HTML, il est possible de spécifier directement la valeur du champ en fournissant une date au format date time string dans l'attribut value. Par exemple : "2024-01-27T15:50".

<input type="datetime-local" name="date_input" id="date_input" value="2024-01-27T15:50" >

De la même manière, nous pouvons définir cette valeur en JavaScript en sélectionnant l'élément input par son ID et en lui assignant une valeur via l'attribut value :

document.getElementById("date_input").value = "2024-01-27T15:50"

Nous aussi avons la possibilité de générer une date personnalisée en exploitant l'objet JavaScript Date. Ensuite, nous pouvons formater cette date en utilisant la méthode toISOString(), qui suit le format ISO. Enfin, pour l'afficher dans l'élément input de type datetime-local, nous extrayons les 16 premiers caractères de la chaîne de caractères obtenue en utilisant la fonction slice(0, 16).

// La date personnalisée en année, mois, jour, heure et minute
var date = new Date(2027, 0, 27, 17, 35)

// On assigne la valeur à l'input
document.getElementById("date_input").value = date.toISOString().slice(0,16)

Pour conclure, voici le code source complet :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS - Définir et Afficher une date dans un input datetime-local</title>
</head>
<body>
    <!-- L'entrée datetime-local -->
    <label for="date_input">Entrer la date et l'heure de l'activité</label>
    <input type="datetime-local" name="date_input" id="date_input" >

    <script>
        // La date personnalisée en année, mois, jour, heure et minute
        var date = new Date(2027, 0, 27, 17, 35)
        
        // On assigne la valeur à l'input
        document.getElementById("date_input").value = date.toISOString().slice(0,16)
    </script>
</body>
</html>

Portez-vous bien ! 😎

#html #javascript

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil