Gérez facilement les opérations de dates et d'heures dans votre application à l'aide de Day.js

Introduction

Travailler avec des dates et des heures en JavaScript peut s'avérer difficile, en particulier lorsque des formats spécifiques sont requis. Cette complexité entraîne souvent des incohérences dans les dates et heures des candidatures. En conséquence, les développeurs se tournent vers des outils et bibliothèques externes tels que Day.js pour gérer ces opérations facilement et avec plus de précision.

Dans cet article, nous explorerons ce qu'est Day.js, ses fonctionnalités de base, comment l'utiliser dans vos projets, comment étendre ses fonctionnalités avec des plugins et sa prise en charge par le navigateur.

Qu’est-ce que Day.js ?

Day.js est une bibliothèque javascript légère et facile à utiliser, conçue pour gérer un large éventail d'opérations de date et d'heure, leur permettant d'être présentées dans des formats facilement lisibles dans des applications Web.

La bibliothèque peut être utilisée à la fois dans les environnements côté client (navigateur) et côté serveur (Node.Js).

Dans le développement Web moderne, les développeurs cherchent à donner la priorité à la vitesse et aux performances lors de la création d'applications. Les importations volumineuses et les fichiers de bibliothèque volumineux sont deux facteurs gênants courants de ces attributs.

Heureusement, Day.js répond à ces problèmes avec une taille de fichier compacte de seulement 2 Ko, ce qui en fait un choix idéal pour gérer les opérations de date et d'heure sans compromettre les performances de l'application.

Installation

Pour commencer à travailler avec la bibliothèque Day.js dans votre application, vous devez d'abord l'inclure.

Pour utiliser la bibliothèque côté client, incluez le script suivant dans le fichier balise de votre document HTML.

<script src="path/to/dayjs/dayjs.min.js"></script>

Vous pouvez également accéder à la bibliothèque via un CDN tel que le CDN jsdeliver.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

Pour installer la bibliothèque en tant que dépendance dans votre application, exécutez la commande suivante :

npm install dayjs

Ensuite, importez dayjs dans votre fichier javascript :

import dayjs from 'dayjs';

Pour créer une nouvelle instance Day.js, appelez la fonction dayjs(). Si aucun argument n'est passé, il renvoie un objet représentant la date et l'heure actuelles :

const currentDate = dayjs();

Vous pouvez ensuite référencer cet objet pour effectuer diverses opérations sur les dates et les heures.

Étant donné que les objets Day.js sont immuables, toute opération susceptible de modifier l'objet renverra une nouvelle instance avec la date et l'heure mises à jour.

Le format ISO DateHeure

Pour travailler efficacement avec les dates et les heures, nous devons d'abord nous familiariser avec l'ISO et sa chaîne de format DateTime.

L'ISO (Organisation internationale de normalisation) est une organisation non gouvernementale mondiale qui développe et publie des normes internationales dans divers secteurs, garantissant ainsi la cohérence et la qualité dans le monde entier.

L'une des normes fournies par l'ISO est le format de représentation des dates et des heures à l'échelle mondiale.

Une chaîne de format ISO DateTime typique ressemble à ceci :

<script src="path/to/dayjs/dayjs.min.js"></script>

• Le T entre le jour et l'heure agit comme un délimiteur qui sépare la date de l'heure dans la chaîne.
• Le Z à la fin de la chaîne, qui signifie Zulu, indique que l'heure est en UTC (Temps universel coordonné).

L'objet JavaScript Date natif propose une méthode toISOString(), qui permet de convertir une date aléatoire en chaîne ISO.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

Maintenant que nous comprenons le format ISO DateTime, explorons certaines des fonctionnalités clés de la bibliothèque Day.js.

Explorer les principales fonctionnalités de Day.js

La bibliothèque Day.js est livrée avec une gamme de fonctionnalités, dont certaines peuvent être utilisées pour formater, analyser, manipuler, interroger et valider des dates et des heures. Explorons comment nous pouvons utiliser ces fonctionnalités clés.

Analyse

La fonction d'analyse offre un moyen simple de créer un nouvel objet Day.js avec une date et une heure spécifiques. Cela peut être fait en transmettant un objet Date JavaScript natif, une chaîne de date ou un horodatage Unix à la fonction dayjs().

npm install dayjs

Formatage

La fonction de formatage vous permet d'afficher les dates et les heures dans un format spécifique. La méthode suivante est utilisée pour effectuer le formatage des dates et des heures.

• format() : reçoit une chaîne de format et renvoie la date et l'heure dans ce format personnalisé.

import dayjs from 'dayjs';

Manipuler

La fonction de manipulation vous permet d'ajuster les dates et les heures de différentes manières. Cela peut être fait en utilisant les méthodes suivantes.

• add(number, timeUnit) : ajoute une durée spécifiée à la date.

const currentDate = dayjs();

• subtract(number, timeUnit) : soustrait une durée spécifiée de la date.

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

• startOf(timeUnit) : définit la date au début d'une unité de temps spécifique, telle que le début d'un jour, d'une semaine, d'un mois, etc.

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• endOf(timeUnit) : définit la date à la fin d'une unité de temps spécifique, comme la fin d'une journée, d'une semaine, d'un mois, etc.

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

Interrogation

La fonction d'interrogation vous permet de vérifier et de comparer les dates et les heures. Cela peut être fait en utilisant les méthodes suivantes qui renvoient une valeur booléenne.

• isBefore(date) : Vérifie si la date est antérieure à la date spécifiée.

<script src="path/to/dayjs/dayjs.min.js"></script>

• isAfter(date) : Vérifie si la date est postérieure à la date spécifiée.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• isSame(date) : Vérifie si la date est la même que la date spécifiée.

npm install dayjs

• isBetween(date1, date2) : Vérifie si la date est comprise entre deux dates spécifiées.

import dayjs from 'dayjs';

• isLeapYear() : Vérifie si l'année de la date est une année bissextile.

const currentDate = dayjs();

Validation

La fonction de validation permet de vérifier si le format de la date fourni est valide ou non. Cela peut être fait en utilisant la méthode suivante :

• isValid() : renvoie une valeur booléenne indiquant si une date est correctement analysée.

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

Extension des fonctionnalités avec des plugins

La bibliothèque Day.js propose une variété de plugins indépendants qui peuvent être utilisés pour étendre ses fonctionnalités de base. Cela permet aux développeurs d'effectuer facilement des formats de date et d'heure plus complexes dans leurs applications.

Pour utiliser un plugin, vous devez d'abord l'inclure puis étendre dayjs à l'aide de la méthode extend().

• Pour inclure un plugin via CDN :

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• Pour étendre dayjs à l'aide du plugin :

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

• Pour inclure et étendre un plugin en utilisant la syntaxe ES6 :

const formattedDate = dayjs().format("HH:mm:ss DD-MM-YYYY");
console.log(formattedDate); // '19:57:36 17-08-2024'

Explorons maintenant comment nous pouvons utiliser deux des plugins disponibles dans une application.

Plugin de calendrier

Le plugin de calendrier offre un moyen pratique d'afficher les dates et les heures dans un format plus lisible par l'homme. Il est idéal pour une utilisation dans des applications telles que les rappels d'événements, la gestion de projet, les planificateurs de tâches, etc.

Jetons un coup d'œil à un exemple simple de la façon dont nous pouvons utiliser ce plugin dans une application de rappel d'événements.

Pour commencer, nous devons inclure la bibliothèque Day.js et le plugin de calendrier via un CDN.

const futureDate = dayjs().add(5, 'days'); // Adds 5 days to the current date
console.log(futureDate.format()); // Returns the added date in an ISO date format

Ensuite, dans notre fichier javascript, nous étendons dayjs avec le plugin de calendrier et appelons la fonction dayjs() pour créer une nouvelle instance Day.js.

const pastDate = dayjs().subtract(2, 'months');  // Subtracts 2 months from the current date
console.log(pastDate.format()); // Returns the subtracted date in an ISO date format

Le plugin Calendrier propose des options de personnalisation pour formater la façon dont vous souhaitez que les dates et les heures soient présentées. Vous pouvez définir un format personnalisé à l'aide d'un objet avec les propriétés exactes suivantes :

const startOfMonth = dayjs().startOf('month'); // Sets the date to the start of the month
console.log(startOfMonth.format()); // Returns the current date from the start of the month in an ISO date format

Dans l'objet, nous échappons les mots dans les valeurs de chaîne, en les enroulant autour de [] crochets.

A l'aide de cet objet, on affiche ensuite la date et l'heure des événements dans l'application de rappel d'événements :

const endOfMonth = dayjs().endOf('month'); // Sets the date to the end of the month
console.log(endOfMonth.format()); // Returns the current date from the end of the month in an ISO date format

Dans cet exemple, eventDate est défini sur une date située à plusieurs mois du jour présent. Dans ce cas, la date est affichée en utilisant le format fourni dans la propriété sameElse de l'objet customFormat.

Si la date de l'événement finit par devenir une date passée, comme un jour de la semaine précédente, par exemple :

<script src="path/to/dayjs/dayjs.min.js"></script>

La date est ensuite affichée selon le format spécifié dans la propriété lastWeek de l'objet customFormat :

Plugin RelativeTime

Le plugin RelativeTime est un plugin day.js couramment utilisé pour afficher les différences de date et d'heure sous forme d'instructions relatives dans les interfaces utilisateur.

Le plugin fournit 4 API différentes pour afficher les heures passées et futures :

• .from(date, [withoutSuffix]) : renvoie une chaîne d'heure relative qui décrit la distance entre la date appelée et la date fournie. Si l’argument sansSuffixe est vrai, il supprime le suffixe « il y a » de la sortie.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• .to(date, [withoutSuffix]) : renvoie une chaîne d'heure relative qui décrit la distance entre la date fournie et la date appelée. Si l'argument sansSuffixe est vrai, il supprime le préfixe « in » de la sortie.

npm install dayjs

• .fromNow([withoutSuffix]) : renvoie une chaîne d'heure relative qui décrit la distance entre la date appelée et la date et l'heure actuelles. Si l’argument sansSuffixe est vrai, il supprime le suffixe « il y a » de la sortie.

import dayjs from 'dayjs';

• .toNow([withoutSuffix]) : renvoie une chaîne d'heure relative qui décrit la distance entre la date et l'heure actuelles et la date appelée. Si l'argument sansSuffixe est vrai, il supprime le préfixe « in » de la sortie.

const currentDate = dayjs();

Jetons un coup d'œil à un exemple simple de la façon dont nous pouvons utiliser le plugin RelativeTime pour afficher l'horodatage des commentaires publiés dans la section des commentaires d'une application.

Comme d'habitude, la première étape à faire est d'inclure le plugin dayjs et relativeTime comme suit :

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

Ensuite, on étend dayjs avec le plugin relativeTime :

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

Après cela, nous pouvons alors afficher l'heure à laquelle un commentaire a été posté, par rapport à l'heure actuelle :

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

Au moment de l'exécution du code ci-dessus, la variable commentPostedTime était définie sur l'heure actuelle, ce qui a ensuite donné lieu à la sortie de chaîne d'heure relative suivante dans le commentaire :

Prise en charge du navigateur et popularité des développeurs

La bibliothèque Day.js est prise en charge dans tous les navigateurs Web modernes. Il possède une communauté active avec plus de 19 millions téléchargements NPM.

La bibliothèque est activement entretenue avec plus de 46 000 étoiles github et 330 contributeurs garantissant qu'elle reste à jour et compatible avec les dernières normes JavaScript.

Conclusion

En conclusion, l'utilisation de la bibliothèque Day.js pour gérer les opérations de dates et d'heures dans votre application permet non seulement de maintenir la vitesse et les performances, mais permet également de gagner du temps en fournissant des fonctions prêtes à l'emploi qui peuvent facilement être utilisées pour formater, interroger , manipuler, analyser et valider les dates et heures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!