HOWTO · jQuery
Formater la date et l'heure à l'aide de DateTimePicker dans jQuery
Cet article vous montre comment formater la date et l'heure à l'aide des plugins jQuery.
Si vous souhaitez uniquement sélectionner des dates, vous devez utiliser un plugin jQuery appelé DatePicker. Mais parfois, vous devez sélectionner à la fois les dates et les heures, vous devez donc utiliser le plugin jQuery appelé DateTimePicker.
Cet article utilisera DateTimePicker pour formater la date.
Formater la date et l’heure à l’aide de DateTimePicker dans jQuery
Le DateTimePicker permet d’écrire une valeur de date et d’heure qui apparaîtra dans le contrôle datetimepicker.
Pour utiliser DateTimePicker, vous devez d’abord télécharger le plugin jQuery. Vous pouvez le télécharger à partir d’ici].
Après le téléchargement, vous devez extraire ces fichiers.
Vous n’êtes pas obligé d’utiliser tous les fichiers. Vous devez uniquement utiliser les fichiers jquery.js, jquery.datetimepicker.full.min.js et jquery.datetimepicker.min.css.
N’oubliez pas que vous devez placer ces fichiers dans le même répertoire. Vous pouvez obtenir jquery.js dans le dossier principal et les fichiers restants dans le répertoire build.
Pour formater les dates dans jQuery DateTimePicker, modifiez la propriété format à l’intérieur de l’élément envoyé à la fonction datetimepicker.
Par exemple, nous pourrions écrire ce qui suit. Pour exécuter ce code, vous devez enregistrer le fichier en tant que fichier HTML et l’exécuter dans le navigateur.
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="jquery.datetimepicker.min.css"
/>
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.full.min.js"></script>
</head>
<body>
<input id="datetimepicker" type="text" />
<script>
$("#datetimepicker").datetimepicker({
format: "d/m/Y H:m:s",
});
</script>
</body>
</html>
Rappel : Le fichier jquery.js doit être inclus au-dessus du jquery.datetimepicker.full.min.js.
Nous avons l’élément input pour le sélecteur de date et d’heure, y compris le script jQuery, les balises de lien et le jQuery datetimepicker. Ensuite, nous appelons datetimepicker avec une entité pour modifier la propriété de format en d/m/Y afin que le meilleur ajustement apparaisse dans l’entrée au format DD-MM-YYYY.
Ici, d représente la date, m représente le mois et Y représente l’année. De même, H représente l’heure, m les minutes et s représente les secondes.
Production:
Ici, le format date-heure est en d/m/Y et H:m:s. Vous pouvez modifier le format d’entrée en transmettant vos formats de date et d’heure.
En résumé, pour formater les dates à l’aide de jQuery DateTimePicker, modifiez la propriété format dans l’objet envoyé à la fonction datetimepicker.
