Comment préremplir un champ de formulaire avec la date du jour et JavaScript ou JQuery
Bien que de nombreuses solutions offrent la possibilité de stocker la date avec chaque entrée de formulaire, il arrive parfois que ce ne soit pas une option. Nous encourageons nos clients à ajouter un champ masqué à leur site et à transmettre ces informations avec l'entrée afin qu'ils puissent suivre le moment où les entrées du formulaire sont saisies. En utilisant JavaScript, c'est simple.
Comment préremplir un champ de formulaire avec la date du jour et JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with JavaScript</title>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Function to get today's date in the desired format
function getFormattedDate() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
return formattedDate;
}
// Use JavaScript to set the value of the hidden field to today's date
document.getElementById('hiddenDateField').value = getFormattedDate();
</script>
</body>
</html>
Décomposons étape par étape le code HTML et JavaScript fourni :
<!DOCTYPE html>
et<html>
: Ce sont des déclarations de document HTML standard spécifiant qu'il s'agit d'un document HTML5.<head>
: Cette section est généralement utilisée pour inclure des métadonnées sur le document, telles que le titre de la page Web, qui est défini à l'aide de l'option<title>
.<title>
: cela définit le titre de la page Web sur « Pré-remplissage des dates avec JavaScript ».<body>
: Il s'agit de la zone de contenu principale de la page Web où vous placez le contenu visible et les éléments de l'interface utilisateur.<form>
: Un élément de formulaire pouvant contenir des champs de saisie. Dans ce cas, il est utilisé pour contenir le champ de saisie masqué qui sera renseigné avec la date du jour.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Il s'agit d'un champ de saisie masqué. Il n'apparaît pas sur la page mais peut stocker des données. Il reçoit un identifiant «hiddenDateField» et un nom «hiddenDateField» pour l'identification et l'utilisation en JavaScript.<script>
: Il s'agit de la balise d'ouverture d'un bloc de script JavaScript, dans lequel vous pouvez écrire du code JavaScript.function getFormattedDate() { ... }
: Ceci définit une fonction JavaScript appeléegetFormattedDate()
. A l'intérieur de cette fonction :- Il crée un nouveau
Date
objet représentant la date et l'heure actuelles en utilisantconst today = new Date();
. - Il formate la date en chaîne au format souhaité (mm/jj/aaaa) en utilisant
today.toLocaleDateString()
L’'en-US'
L'argument spécifie les paramètres régionaux (anglais américain) pour le formatage et l'objet avecyear
,month
etday
Properties définit le format de date.
- Il crée un nouveau
return formattedDate;
: Cette ligne renvoie la date formatée sous forme de chaîne.document.getElementById('hiddenDateField').value = getFormattedDate();
: Cette ligne de code :- Les usages
document.getElementById('hiddenDateField')
pour sélectionner le champ de saisie masqué avec l'ID «hiddenDateField». - Définit le
value
propriété du champ de saisie sélectionné à la valeur renvoyée par legetFormattedDate()
fonction. Cela remplit le champ masqué avec la date du jour au format spécifié.
- Les usages
Le résultat final est que lorsque la page se charge, le champ de saisie masqué avec l'ID « hiddenDateField » est renseigné avec la date du jour au format mm/jj/aaaa sans zéros non significatifs, comme spécifié dans le getFormattedDate()
la fonction.
Comment préremplir un champ de formulaire avec la date du jour et jQuery
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with jQuery and JavaScript Date Object</title>
<!-- Include jQuery from a CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Use jQuery to set the value of the hidden field to today's date
$(document).ready(function() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
$('#hiddenDateField').val(formattedDate);
});
</script>
</body>
</html>
Ce code HTML et JavaScript montre comment utiliser jQuery pour préremplir un champ de saisie masqué avec la date du jour, au format mm/jj/aaaa, sans zéros non significatifs. Décomposons-le étape par étape :
<!DOCTYPE html>
et<html>
: Ce sont des déclarations de document HTML standard indiquant qu'il s'agit d'un document HTML5.<head>
: Cette section est utilisée pour inclure des métadonnées et des ressources pour la page Web.<title>
: Définit le titre de la page Web sur « Pré-remplissage de la date avec jQuery et JavaScript Date Object ».<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Cette ligne inclut la bibliothèque jQuery en spécifiant sa source depuis un réseau de diffusion de contenu (CDN). Il garantit que la bibliothèque jQuery est disponible pour une utilisation sur la page Web.<body>
: Il s'agit de la zone de contenu principale de la page Web où vous placez le contenu visible et les éléments de l'interface utilisateur.<form>
: Un élément de formulaire HTML utilisé pour contenir des champs de saisie. Dans ce cas, il est utilisé pour encapsuler le champ de saisie masqué.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Un champ de saisie masqué qui ne sera pas visible sur la page Web. On lui attribue un identifiant «hiddenDateField» et un nom «hiddenDateField».<script>
: Il s'agit de la balise d'ouverture d'un bloc de script JavaScript dans lequel vous pouvez écrire du code JavaScript.$(document).ready(function() { ... });
: Ceci est un bloc de code jQuery. Il utilise le$(document).ready()
fonction pour garantir que le code contenu s’exécute une fois la page complètement chargée. A l'intérieur de cette fonction :const today = new Date();
crée un nouveauDate
objet représentant la date et l’heure actuelles.const formattedDate = today.toLocaleDateString('en-US', { ... });
formate la date dans une chaîne au format souhaité (mm/jj/aaaa) à l'aide dutoLocaleDateString
méthode.
$('#hiddenDateField').val(formattedDate);
sélectionne le champ de saisie masqué avec l'ID «hiddenDateField» à l'aide de jQuery et définit sonvalue
à la date formatée. Cela préremplit effectivement le champ masqué avec la date du jour dans le format spécifié.
Le code jQuery simplifie le processus de sélection et de modification du champ de saisie masqué par rapport au JavaScript pur. Lorsque la page se charge, le champ de saisie masqué est renseigné avec la date du jour au format mm/jj/aaaa, et aucun zéro non significatif n'est présent, comme spécifié dans le formattedDate
variable.