Transformer une chaîne en une date en JavaScript

1. Utilisez la fonction new Date() pour convertir une chaîne en date en JavaScript
2. Utilisez la fonction Date.parse() pour convertir une chaîne en date en JavaScript
3. Diviser la chaîne et la convertir en date en JavaScript
4. Conclusion

Parfois, il est nécessaire de convertir une chaîne en un format de date. La chaîne peut être une valeur de date stockée sous forme de chaîne dans la base de données ou une valeur renvoyée par l’API. Dans les deux cas, cette valeur de chaîne ne peut pas être directement utilisée dans les sélecteurs de date ou dans le type d’entrée date. Par conséquent, la chaîne devra être convertie en un objet de date à afficher dans l’interface utilisateur HTML. Étant dans un format de chaîne, il n’est pas possible d’effectuer des opérations spécifiques à la date. Par conséquent, nous devons convertir la chaîne en un objet de date. Nous énumérons ici quelques façons de convertir une chaîne en date:

• new Date()
• Date.parse()
• Fractionner et convertir en date

Utilisez la fonction new Date() pour convertir une chaîne en date en JavaScript

Le moyen le plus couramment utilisé pour convertir une chaîne en date est la fonction new Date(). New Date() prend des arguments sous diverses formes décrites ci-dessous mais renvoie un objet date.

1. Aucun paramètre comme argument. New Date() renverra la date et l’heure actuelles du système, y compris les informations de fuseau horaire dans l’heure système locale, si aucun paramètre n’est passé à la fonction new Date().
2. Passer l’objet de date comme argument. Le new Date() renverra un objet date tel que représenté par la chaîne de date passée en argument.
3. Passer une date de chaîne. La partie la plus intéressante de la fonction new Date('2018-12-3') est qu’elle permet de convertir une date passée sous forme de chaîne comme argument en un format de date. Nous en discuterons en détail.

Passer une date de chaîne comme argument

Quand on passe une date au format chaîne à la new Date(), elle est convertie en objet date. Le format de chaîne doit être YYYY-MM-DD, le format ISO 8601, pour que cela fonctionne. Les autres formats de date ne peuvent pas être convertis en objet date par cette méthode. Par exemple, reportez-vous au code comme suit:

new Date('2021-05-23');
new Date('2020/2/29');
new Date('2020-14-03');
new Date('14-02-2021');

Production:

Sun May 23 2021 05:30:00 GMT+0530 (India Standard Time)
Sat Feb 29 2020 00:00:00 GMT+0530 (India Standard Time)
Invalid Date
Invalid Date

Comme vous le voyez dans les exemples ci-dessus, le seul format de chaîne accepté pour la date est 2021-05-23 et 2020/2/29. La fonction new Date() permet de traiter des chaînes au format YYYY-MM-DD ou YYYY/MM/DD. Si nous avons un format de chaîne différent qui n’est pas conforme aux normes ISO 8601, la new Date() ne pourra pas analyser la date et reviendra comme une Date invalide.

Remarques

• new Date() ne peut être utilisé pour convertir la chaîne en date que si elle qualifie le format ISO 8601 YYYY-MM-DD hh:mm:ss.
• Pour un format différent qui ne peut pas être compris par new Date(), il est préférable de scinder la chaîne et de les passer comme arguments dans la new Date(), comme introduit plus loin dans cet article.
• new Date() permet également de convertir une chaîne au format 01 Mar 2020 12:30 ou encore MM DD YYYY HH:mm. Dans le cas où nous utilisons une valeur passée du backend via l’API pour la conversion, nous devons nous assurer que le format passé est bien compris par la fonction new Date(), et il est bon de vérifier que new Date() renvoie un objet date valide. Sinon, le code peut casser.

Utilisez la fonction Date.parse() pour convertir une chaîne en date en JavaScript

Date.parse() est une autre option pour convertir la chaîne date. Il renvoie une valeur numérique au lieu d’un objet date. Par conséquent, il faudra un traitement supplémentaire si vous attendez un objet de date. Il convertit la date analysée en un nombre représentant les millisecondes écoulées depuis le 1er janvier 1970, heure de minuit. Il est similaire au format d’horodatage avec la différence qu’au lieu de secondes, Date.parse() renvoie une valeur en millisecondes.

Date.parse('2020-11-21')
Date.parse('2019-01-01T12:30:00.000Z')
Date.parse('20-11-2021')
Date.parse('11-20-2021')

Production:

1605916800000
1546345800000
NaN
1637346600000

Il est intéressant de noter que Date.parse() est le même que new Date() en ce qui concerne le type de valeurs d’entrée qu’il peut accepter mais offre une meilleure vérification manuelle si la date est d’un format valide. Une telle méthode est pratique, en particulier lorsque nous avons affaire à une valeur de réponse API. Dans de tels cas, nous pouvons avoir besoin d’effectuer une vérification pour s’assurer que la valeur retournée par le backend est conforme au format de date accepté par la fonction Date.parse() ou même la fonction new Date(). Une simple vérification isNaN() peut aider à identifier et à atterrir en toute sécurité dans la méthode de conversion de date.

let stringsFromAPI = ['2020-11-21', '20-11-2021'];

stringsFromAPI.forEach((d) => {
  if (!isNaN(Date.parse(d))) {
    console.log(new Date(d));
  }
})

Production:

Sat Nov 21 2020 05:30:00 GMT+0530 (India Standard Time)

Notez qu’ici la date 20-11-2021 est au format DD-MM-YYYY. Il ne sera donc pas compris par la fonction Date.parse() ni par la fonction new Date(). Par conséquent, si stringsFromAPI était une valeur provenant du backend, alors la fonction ci-dessus ne convertira que les dates conformes au format acceptable. Le !isNaN(Date.parse(d)) rejette silencieusement la valeur de date incorrecte et enregistre la valeur dont la conversion a réussi.

Remarques

• Date.parse() est similaire au new Date() sauf pour le type de retour, ce qui le rend approprié pour vérifier si une valeur de date est d’un format correct et peut également être utilisé pour attribuer une date en utilisant le dateObj.setTime(Date.parse(DateString)).
• Par rapport à l’horodatage Unix, le Date.parse() renvoie des millisecondes qui peuvent être utilisées pour la comparaison de précision des dates même sans les convertir en objets de date réels avec new Date().
• Date.parse() utilise en interne la new Date() pour l’analyse de la date, donc les formats acceptés par la fonction new Date() seront également supportés dans la fonction Date.parse().

Diviser la chaîne et la convertir en date en JavaScript

Les fonctions Date.parse() et new Date() sont conçues sur la base du format de date étendu ISO 8601. Parfois, si la date n’est pas conforme au format attendu, nous devrons la résoudre manuellement en fractionnant la chaîne de date, en extrayant les valeurs et en les convertissant en un objet de date. Étonnamment, la new Date() prend également en charge les paramètres de date à passer comme arguments, et nous obtenons l’objet date en sortie.

La syntaxe pour créer une date à partir d’arguments:

new Date(yearValue, IndexOfMonth, dayValue, hours, minutes, seconds)

Où,

• yearValue: doit être conforme au format ISO 8061 YYYY. Par exemple, 2021. Si on spécifie une valeur au format YY, cela la prendra à tort. Par exemple, le simple fait de mentionner 21 pour 2021 sera considéré comme 1921 au lieu de 2021.
• IndexOfMonth: commence par l’indice 0. Par conséquent, soustrayez 1 de la valeur du mois. Par exemple, pour mars, la valeur est 3, mais monthIndex sera 2 (c’est-à-dire 3-1 = 2). L’indice du mois doit généralement se situer dans la fourchette 0-11
• dayValue: Indique le jour du mois. Il doit être compris entre 1 et 31, selon le nombre de jours dans un mois. Par exemple: pour le 21-05-2021, la valeur du jour est 21
• hours: l’heure de la journée. Par exemple 10 heures.
• minutes: les minutes après une heure.
• secondes: maintient la valeur de la seconde au-delà d’une minute.

Ce qui suit est une fonction qui prend une chaîne ayant un format de date personnalisé - DD-MM-YYYYTHH:mm:SS et renvoie un objet date.

function convertFromStringToDate(responseDate) {
  let dateComponents = responseDate.split('T');
  let datePieces = dateComponents[0].split('-');
  let timePieces = dateComponents[1].split(':');
  return (new Date(
      datePieces[2], (datePieces[1] - 1), datePieces[0], timePieces[0],
      timePieces[1], timePieces[2]))
}

convertFromStringToDate('21-03-2020T11:20:30')

Production:

Sat Mar 21 2020 11:20:30 GMT+0530 (India Standard Time)

Conclusion

La fonction new Date() la plus couramment utilisée est assez utile pour convertir une chaîne date en objet date, à condition que la chaîne soit conforme au format ISO 8601. Par rapport à la new Date(), la fonction Date.parse() diffère en ce sens qu’elle renvoie une valeur numérique contenant les millisecondes depuis le 1er janvier 1970 qui se sont écoulées jusqu’à la date passée en argument de chaîne. Un format de date différent peut être converti en fractionnant la chaîne de date et en passant les composants de date comme arguments à la fonction new Date().