En tant que développeur de logiciels, vous ne pouvez pas fuir la manipulation des dates. Presque toutes les applications créées par un développeur auront un composant dans lequel la date et l'heure doivent être obtenues de l'utilisateur, stockées dans une base de données et affichées à nouveau à l'utilisateur.
Demandez à n'importe quel programmeur son expérience dans la gestion des dates et des fuseaux horaires et ils partageront probablement des histoires de guerre. La gestion des champs de date et d'heure n'est certainement pas sorcier, mais peut souvent être fastidieuse et sujette aux erreurs.
Il existe des centaines d'articles sur le sujet, cependant, la plupart sont soit trop académiques, se concentrant sur les détails, soit trop inégaux, fournissant de courts extraits de code sans grande explication. Ce guide détaillé de la manipulation de DateTime devrait vous aider à comprendre les concepts de programmation et les meilleures pratiques applicables à l'heure et à la date sans avoir à parcourir une mer d'informations sur ce sujet.
Dans cet article, je vais vous aider à réfléchir clairement aux champs de date et d'heure et vous suggérer quelques bonnes pratiques qui peuvent vous aider à éviter l'enfer de la date et de l'heure. Ici, nous explorerons certains des concepts clés nécessaires pour manipuler correctement les valeurs de date et d'heure, les formats pratiques pour stocker les valeurs DateTime et les transférer via des API, etc.
Pour commencer, la bonne réponse pour le code de production est presque toujours d'utiliser une bibliothèque appropriée plutôt que de lancer la vôtre. Les difficultés potentielles avec le calcul DateTime décrites dans cet article ne sont que la pointe de l'iceberg, mais il est toujours utile de les connaître, avec ou sans bibliothèque.
Aide des bibliothèques DateTime si vous les comprenez correctement
Les bibliothèques de dates vous aident à bien des égards à vous simplifier la vie. Ils simplifient considérablement l'analyse des dates, les opérations arithmétiques et logiques des dates et le formatage des dates. Vous pouvez trouver une bibliothèque de dates fiable pour le front-end et le back-end pour faire le gros du travail à votre place.
Cependant, nous utilisons souvent des bibliothèques de dates sans penser au fonctionnement réel de la date / heure. La date / heure est un concept complexe. Les bogues qui surviennent en raison de sa mauvaise compréhension peuvent être extrêmement difficiles à comprendre et à corriger, même avec l'aide de bibliothèques de dates. En tant que programmeur, vous devez comprendre les bases et être capable d'apprécier les problèmes que les bibliothèques de dates résolvent pour en tirer le meilleur parti.
De plus, les bibliothèques de date / heure ne peuvent vous mener que jusqu'à présent. Toutes les bibliothèques de dates fonctionnent en vous donnant accès à des structures de données pratiques pour représenter un DateTime. Si vous envoyez et recevez des données via une API REST, vous devrez éventuellement convertir la date en chaîne et vice versa, car JSON n'a pas de structure de données native pour représenter DateTime. Les concepts que j'ai décrits ici vous aideront à éviter certains des problèmes courants qui pourraient survenir lors de ces transformations date-chaîne et chaîne-date.
Remarque: Même si j'ai utilisé JavaScript en tant que langage de programmation abordé dans cet article, ce sont des concepts généraux qui s'appliquent, dans une large mesure, à pratiquement tous les langages de programmation et leurs bibliothèques de dates. Donc, même si vous n’avez jamais écrit une ligne de JavaScript auparavant, n’hésitez pas à continuer à lire car je suppose à peine une connaissance préalable de JavaScript dans cet article.
Normaliser le temps
Un DateTime est un moment très spécifique. Pensons-y. Pendant que je griffonne cet article, l'horloge de mon ordinateur portable indique le 21 juillet 13h29. C'est ce que nous appelons «l'heure locale», l'heure que je vois sur les horloges murales autour de moi et sur ma montre-bracelet.
Donnez ou prenez quelques minutes, si je demande à mon amie de me rencontrer dans un café voisin à 15h00, je peux m'attendre à la voir là-bas à peu près à ce moment-là. De même, il n’y aurait pas de confusion si je disais, par exemple, 'rencontrons-nous dans une heure et demie'. Nous parlons régulièrement de l'heure de cette façon avec des personnes vivant dans la même ville ou dans le même fuseau horaire.
ce qui a causé la crise de la dette grecque
Pensons à un scénario différent: je veux dire à un ami vivant à Uppsala, en Suède, que je veux lui parler à 17 heures. Je lui envoie un message, 'Hey Anton, parlons à 17 heures.' Je reçois immédiatement la réponse: 'Votre temps ou mon temps?'
Anton me dit qu'il vit dans le fuseau horaire d'Europe centrale, UTC + 01: 00. J'habite à UTC + 05: 45. Cela signifie que quand il est 17 h 00 chez moi, il est 17 h 00 - 05 h 45 = 11 h 15 UTC, ce qui se traduit par 11 h 15 UTC + 01 h 00 = 12 h 15 à Uppsala, parfait pour les deux de nous.
Soyez également conscient de la différence entre le fuseau horaire (heure d'Europe centrale) et le décalage du fuseau horaire (UTC + 05: 45). Les pays peuvent également décider de modifier leurs décalages de fuseau horaire pour l'heure d'été pour des raisons politiques. Presque chaque année, les règles sont modifiées dans au moins un pays, ce qui signifie que tout code contenant ces règles doit être mis à jour. Cela vaut la peine de considérer de quoi dépend votre base de code pour chaque niveau de votre application.
C'est une autre bonne raison pour laquelle nous recommandons que seul le front-end traite les fuseaux horaires dans la plupart des cas. Si ce n'est pas le cas, que se passe-t-il lorsque les règles utilisées par votre moteur de base de données ne correspondent pas à celles de votre serveur frontal ou de votre back-end?
Ce problème de gestion de deux versions différentes de l'heure, par rapport à l'utilisateur et par rapport à un standard universellement accepté, est difficile, encore plus dans le monde de la programmation où la précision est primordiale et même une seconde peut faire une énorme différence. La première étape pour résoudre ces problèmes consiste à stocker DateTime en UTC.
Standardisation du format
Normaliser l'heure est merveilleux car je n'ai besoin que de stocker l'heure UTC et tant que je connais le fuseau horaire de l'utilisateur, je peux toujours convertir à leur heure. Inversement, si je connais l'heure locale d'un utilisateur et son fuseau horaire, je peux la convertir en UTC.
Mais les dates et heures peuvent être spécifiées dans de nombreux formats différents. Pour la date, vous pouvez écrire «30 juillet» ou «30 juillet» ou «7/30» (ou 30/7, selon l'endroit où vous habitez). Pour l'heure, vous pourriez écrire «21h30» ou «21h30».
Des scientifiques du monde entier se sont réunis pour s'attaquer à ce problème et ont choisi un format pour décrire le temps que les programmeurs aiment vraiment parce qu'il est court et précis. Nous aimons l'appeler «format de date ISO», qui est une version simplifiée du format étendu ISO-8601 et qui ressemble à ceci:
Pour 00:00 ou UTC, nous utilisons «Z» à la place, ce qui signifie l'heure Zulu, un autre nom pour UTC.
Manipulation de date et arithmétique en JavaScript
Avant de commencer avec les meilleures pratiques, nous en apprendrons davantage sur la manipulation de date à l'aide de JavaScript pour comprendre la syntaxe et les concepts généraux. Bien que nous utilisions JavaScript, vous pouvez facilement adapter ces informations à votre langage de programmation préféré.
Nous utiliserons l'arithmétique des dates pour résoudre les problèmes courants liés aux dates que la plupart des développeurs rencontrent.
Mon objectif est de vous permettre de créer un objet date à partir d'une chaîne et d'en extraire des composants. C'est quelque chose qu'une bibliothèque de dates peut vous aider, mais il est toujours préférable de comprendre comment cela se fait dans les coulisses.
Une fois que nous nous sommes salis les mains avec la date et l'heure, il est alors plus facile de réfléchir aux problèmes auxquels nous sommes confrontés, d'extraire les meilleures pratiques et d'aller de l'avant. Si vous souhaitez passer aux meilleures pratiques, n'hésitez pas à le faire, mais je vous recommande vivement de parcourir au moins la section arithmétique des dates ci-dessous.
L'objet de date JavaScript
Les langages de programmation contiennent des constructions utiles pour nous faciliter la vie. Le JavaScript Date l'objet est une telle chose. Il propose des méthodes pratiques pour obtenir la date et l’heure actuelles, stocker une date dans une variable, effectuer une arithmétique de date et formater la date en fonction des paramètres régionaux de l’utilisateur.
En raison des différences entre les implémentations du navigateur et de la gestion incorrecte de l'heure d'été (DST), selon l'objet Date pour les applications critiques, il n'est pas recommandé et vous devriez probablement utiliser une bibliothèque DateTime comme Luxon, date-fns ou dayjs . (Quoi que vous utilisiez, évitez le Moment.js, autrefois populaire, souvent simplement appelé moment, tel qu'il apparaît dans le code, car il est désormais obsolète.)
Mais à des fins éducatives, nous utiliserons les méthodes fournies par l'objet Date () pour apprendre comment JavaScript gère DateTime.
Obtenir la date actuelle
const currentDate = new Date(); Si vous ne transmettez rien au constructeur Date, l’objet date renvoyé contient la date et l’heure actuelles.
Vous pouvez ensuite le formater pour extraire uniquement la partie de la date comme suit:
const currentDate = new Date(); const currentDayOfMonth = currentDate.getDate(); const currentMonth = currentDate.getMonth(); // Be careful! January is 0, not 1 const currentYear = currentDate.getFullYear(); const dateString = currentDayOfMonth + '-' + (currentMonth + 1) + '-' + currentYear; // '27-11-2020' Remarque: l'écueil «janvier est 0» est courant mais pas universel. Il vaut la peine de vérifier la documentation de n'importe quel langage (ou format de configuration: par exemple, cron est notamment basé sur 1) avant de commencer à l'utiliser.
Obtention de l'horodatage actuel
Si vous souhaitez plutôt obtenir l'horodatage actuel, vous pouvez créer un nouvel objet Date et utiliser la méthode getTime ().
const currentDate = new Date(); const timestamp = currentDate.getTime(); En JavaScript, un horodatage correspond au nombre de millisecondes écoulées depuis le 1er janvier 1970.
Si vous n'avez pas l'intention de soutenir La conversion d'une chaîne en objet de date JavaScript se fait de différentes manières. Le constructeur de l'objet Date accepte une grande variété de formats de date: Notez que vous n'avez pas besoin d'inclure le jour de la semaine car JS peut déterminer le jour de la semaine pour n'importe quelle date. Vous pouvez également passer l'année, le mois, le jour, les heures, les minutes et les secondes comme arguments séparés: Bien sûr, vous pouvez toujours utiliser le format de date ISO: Cependant, vous pouvez rencontrer des problèmes lorsque vous ne fournissez pas explicitement le fuseau horaire! L'un ou l'autre vous donnera le 25 juillet 2016 à 00:00:00 heure locale. Si vous utilisez le format ISO, même si vous ne donnez que la date et non l'heure et le fuseau horaire, il acceptera automatiquement le fuseau horaire comme UTC. Cela signifie que: Heureusement, le JavaScript moderne possède des fonctions d'internationalisation pratiques intégrées dans la norme Pour cela, nous aurons besoin de deux objets: a Si à la place nous voulions le format néerlandais (D / M / YYYY), nous passerions simplement un code de culture différent au Ou une forme plus longue du format américain, avec le nom du mois écrit: Maintenant, si nous voulions un format ordinal approprié le jour du mois, c'est-à-dire «14» au lieu de «14», cela nécessite malheureusement une petite solution de contournement, car les seules valeurs valides de Malheureusement, Si vous avez besoin de prendre en charge des navigateurs plus anciens comme IE avant la version 11, le formatage de la date en JavaScript est plus difficile car il n'y avait pas de fonctions de formatage de date standard telles que En PHP par exemple, la fonction Vous pouvez utiliser un combinaison différente de lettres précédé de Si vous êtes sûr du format que vous souhaitez utiliser, il est préférable d'extraire des bits individuels à l'aide des fonctions JavaScript décrites ci-dessus et de créer vous-même une chaîne. Nous pouvons obtenir la date au format MM / JJ / AAAA comme Le problème avec cette solution est qu'elle peut donner une longueur incohérente aux dates car certains mois et jours du mois sont à un chiffre et d'autres à deux chiffres. Cela peut être problématique, par exemple, si vous affichez la date dans une colonne de tableau, car les dates ne correspondent pas. Nous pouvons résoudre ce problème en utilisant une fonction «pad» qui ajoute un 0 au début. Maintenant, nous obtenons la date correcte au format MM / JJ / AAAA en utilisant: Si nous voulons plutôt DD-MM-YYYY, le processus est similaire: Montons la mise et essayons d'imprimer la date au format 'Mois, date, année'. Nous aurons besoin d'un mappage des index des mois sur les noms: Certaines personnes aiment afficher la date au 1er janvier 2013. Pas de problème, tout ce dont nous avons besoin est une fonction d'assistance Il est facile de déterminer le jour de la semaine à partir de l’objet de date, ajoutons-le dans: Le point le plus important ici est qu'une fois que vous avez extrait les nombres de la date, le formatage est principalement lié aux chaînes. Une fois que vous savez comment analyser une date et la mettre en forme, changer une date d'un format à un autre consiste simplement à combiner les deux. Par exemple, si vous avez une date au format 21 juillet 2013 et que vous souhaitez changer le format en 21-07-2013, cela peut être réalisé comme ceci: Les méthodes de mise en forme de la date dont nous avons discuté ci-dessus devraient fonctionner dans la plupart des applications, mais si vous voulez vraiment localiser la mise en forme de la date, je vous suggère d'utiliser le … Nous donne quelque chose comme Si vous changez les paramètres régionaux en 'en-US', vous obtiendrez à la place '26 juillet 2016'. Remarquez comment la mise en forme a changé, mais les options d'affichage sont toujours les mêmes - une fonction très utile. Comme indiqué dans la section précédente, la nouvelle technique basée sur Avec Si je voulais plutôt le mois complet «Juillet», je ne fais que changer le paramètre du mois dans les options en «long». JavaScript gère tout pour moi. Pour en-US, j'obtiens maintenant le 26 juillet 2016. Remarque: si vous souhaitez que le navigateur utilise automatiquement les paramètres régionaux de l'utilisateur, vous pouvez passer «undefined» comme premier paramètre. Si vous souhaitez afficher la version numérique de la date et que vous ne voulez pas vous soucier du MM / JJ / AAAA par rapport au JJ / MM / AAAA pour différents paramètres régionaux, je suggère la solution simple suivante: Sur mon ordinateur, cela génère Cela génère Vous pouvez également utiliser d'autres fonctions associées pour localiser la façon dont l'heure et la date sont affichées: Voici un exemple d'ajout de 20 jours à une date JavaScript (c'est-à-dire, détermination de la date 20 jours après une date connue): L'objet date d'origine représente désormais une date 20 jours après le 20 juillet et Pour calculer des horodatages relatifs avec une différence plus précise que des jours entiers, vous pouvez utiliser Comme pour tout ce qui concerne la date, la comparaison des dates a ses propres pièges. Tout d'abord, nous devons créer des objets de date. Heureusement,, = tout fonctionne. Donc, comparer le 19 juillet 2014 et le 18 juillet 2014 est aussi simple que: La vérification de l'égalité est plus délicate, car deux objets de date représentant la même date sont toujours deux objets de date différents et ne seront pas égaux. La comparaison des chaînes de date est une mauvaise idée car, par exemple, «20 juillet 2014» et «20 juillet 2014» représentent la même date mais ont des représentations de chaînes différentes. L'extrait ci-dessous illustre le premier point: Cela affichera Ce cas particulier peut être résolu en comparant les équivalents entiers des dates (leurs horodatages) comme suit: J'ai vu cet exemple dans de nombreux endroits, mais je ne l'aime pas parce que vous ne créez généralement pas d'objet de date à partir d'un autre objet de date. Je pense donc que l'exemple n'est important que d'un point de vue académique. En outre, cela nécessite que les deux objets Date se réfèrent exactement à la même seconde, alors que vous voudrez peut-être seulement savoir s'ils font référence au même jour, heure ou minute. Prenons un exemple plus pratique. Vous essayez de comparer si l'anniversaire que l'utilisateur a entré est le même que la date chanceuse que vous obtenez d'une API. Les deux représentaient la même date mais malheureusement votre utilisateur n'obtiendra pas le million de dollars. Voici le problème: JavaScript suppose toujours que le fuseau horaire est celui que le navigateur lui fournit, sauf indication contraire explicite. Cela signifie, pour moi, Il n’est pas possible de modifier uniquement le fuseau horaire d’un objet de date existant. Notre objectif est donc maintenant de créer un nouvel objet de date, mais avec l’UTC au lieu du fuseau horaire local. Nous ignorerons le fuseau horaire de l'utilisateur et utiliserons UTC lors de la création de l'objet de date. Il y a deux façons de procéder: Cela fonctionne également si vous ne spécifiez pas l'heure, car celle-ci sera par défaut minuit (c'est-à-dire 00: 00: 00Z): N'oubliez pas: si le constructeur de date reçoit une chaîne au format de date ISO correct de AAAA-MM-JJ, il suppose automatiquement UTC. Un scénario courant que vous rencontrerez est de trouver la différence entre deux dates. Nous discutons de deux cas d'utilisation: Convertissez les deux dates en horodatage UTC, trouvez la différence en millisecondes et trouvez les jours équivalents. Remarque: nous avons un format non standard. Lisez le document de l'API pour déterminer si cela signifie le 12 octobre ou le 10 décembre. Passez au format ISO en conséquence. Je sais qu'il existe des façons plus concises d'écrire ce code, mais j'aime l'écrire de cette façon en raison de la clarté de la logique. Maintenant que nous sommes à l'aise avec l'arithmétique des dates, nous sommes en mesure de comprendre les meilleures pratiques à suivre et les raisons de les suivre. Si vous obtenez la date et l'heure de l'utilisateur, vous recherchez probablement leur DateHeure locale. Nous avons vu dans la section arithmétique des dates que le Pour supprimer toute confusion, je suggère toujours de créer une date en utilisant La partie cool est que vous pouvez utiliser les variations qui vous permettent d'omettre l'un des quatre derniers paramètres s'ils sont nuls; c'est-à-dire Par exemple, si vous utilisez un sélecteur de date et d'heure qui vous donne la date 2012-10-12 et l'heure 12:30, vous pouvez extraire les pièces et créer un nouvel objet Date comme suit: Essayez d'éviter de créer une date à partir d'une chaîne à moins qu'elle ne soit au format de date ISO. Utilisez plutôt la méthode Date (année, mois, date, heures, minutes, secondes, microsecondes). Si vous n'obtenez que la date, la date de naissance d'un utilisateur par exemple, il est préférable de convertir le format en un format de date ISO valide pour éliminer toutes les informations de fuseau horaire susceptibles de faire avancer ou reculer la date lors de la conversion en UTC. Par exemple: En cas d'oubli, si vous créez un Stockez toujours le DateTime au format UTC. Envoyez toujours une chaîne de date ISO ou un horodatage au back-end. Des générations de programmeurs informatiques ont réalisé cette simple vérité après des expériences amères en essayant de montrer l'heure locale correcte à l'utilisateur. Le stockage de l'heure locale dans le back-end est une mauvaise idée, il est préférable de laisser le navigateur gérer la conversion en heure locale dans le front-end. En outre, il devrait être évident que vous ne devez jamais envoyer une chaîne DateTime telle que «20 juillet 1989 12h10» à l'arrière-plan. Même si vous envoyez également le fuseau horaire, vous augmentez l'effort des autres programmeurs pour comprendre vos intentions et analyser et stocker correctement la date. Utilisez le 'Parfois, c'est important de connaître le fuseau horaire dans lequel un événement s'est produit et la conversion vers un fuseau horaire unique efface irrévocablement cette information. 'Si vous faites une promotion marketing et que vous voulez savoir quels clients ont passé des commandes vers l'heure du déjeuner, une commande qui semble avoir été passée à midi GMT n'est pas très utile lorsqu'elle a été passée au petit-déjeuner à New York.' Si vous rencontrez ce genre de situation, il serait plus sage de gagner également l'heure locale. Comme d'habitude, nous aimerions créer la date au format ISO, mais nous devons d'abord trouver le décalage du fuseau horaire. L'objet Date Pour mon fuseau horaire +05: 45, j'obtiens -345, ce n'est pas seulement le signe opposé, mais un nombre comme -345 peut être complètement déroutant pour un développeur back-end. Nous convertissons donc cela en +05: 45. Nous obtenons maintenant le reste des valeurs et créons une chaîne ISO valide qui représente le DateTime local. Si vous le souhaitez, vous pouvez encapsuler les dates UTC et locales dans un objet. Maintenant, dans le back-end, si vous vouliez savoir si l'événement s'est produit avant midi, heure locale, vous pouvez analyser la date et utiliser simplement le Nous n’avons pas utilisé le Parfois, même avec le fuseau horaire local stocké, vous souhaiterez afficher des dates dans un fuseau horaire particulier. Par exemple, les horaires des événements peuvent avoir plus de sens dans le fuseau horaire de l'utilisateur actuel s'ils sont virtuels, ou dans le fuseau horaire où ils auront lieu physiquement, s'ils ne le sont pas. Dans tous les cas, il vaut la peine de regarder au préalable solutions établies pour le formatage avec des noms de fuseau horaire explicites. Configurez toujours vos serveurs et bases de données pour utiliser le fuseau horaire UTC. (Notez que UTC et GMT sont pas la même chose —GMT, par exemple, pourrait impliquer un passage à BST pendant l'été, alors que UTC ne le fera jamais.) Nous avons déjà vu à quel point les conversions de fuseau horaire peuvent représenter une douleur, en particulier lorsqu'elles ne sont pas intentionnelles. L'envoi permanent de l'heure UTC et la configuration de vos serveurs pour qu'ils soient dans le fuseau horaire UTC peuvent vous faciliter la vie. Votre code back-end sera beaucoup plus simple et plus propre, car il ne nécessite aucune conversion de fuseau horaire. Les données DateTime provenant de serveurs du monde entier peuvent être comparées et triées sans effort. Le code dans le back-end doit pouvoir supposer que le fuseau horaire du serveur est UTC (mais doit toujours avoir une vérification en place pour être sûr). Une simple vérification de la configuration évite d'avoir à réfléchir et à coder pour les conversions à chaque fois qu'un nouveau code DateTime est écrit. La manipulation de la date est un problème difficile. Les concepts qui sous-tendent les exemples pratiques de cet article s'appliquent au-delà de JavaScript et ne sont que le début lorsqu'il s'agit de gérer correctement les données et les calculs DateTime. De plus, chaque bibliothèque d'aide sera livrée avec son propre ensemble de nuances. La ligne du bas est: Utilisez ISO sur le back-end et laissez le front-end pour formater les choses correctement pour l'utilisateur. Les programmeurs professionnels seront conscients de certaines des nuances et utiliseront (d'autant plus décidément) des bibliothèques DateTime bien prises en charge à la fois sur le back-end et le front-end. Les fonctions intégrées du côté de la base de données sont une autre histoire, mais j'espère que cet article donne suffisamment d'informations pour prendre des décisions plus judicieuses dans ce contexte également.Analyse d'une date
Date.now()const date1 = new Date('Wed, 27 July 2016 13:30:00'); const date2 = new Date('Wed, 27 July 2016 07:45:00 UTC'); const date3 = new Date('27 July 2016 13:30:00 UTC+05:45'); const date = new Date(2016, 6, 27, 13, 30, 0); const date = new Date('2016-07-27T07:45:00Z'); const date1 = new Date('25 July 2016'); const date2 = new Date('July 25, 2016'); Formatage d'une date
new Date('25 July 2016').getTime() !== new Date('2016-07-25').getTime() new Date('2016-07-25').getTime() === new Date('2016-07-25T00:00:00Z').getTime() espace de noms qui fait du formatage de la date une opération simple.Intl et un Date, initialisé avec nos préférences de sortie. Supposons que nous souhaitons utiliser le format américain (M / J / AAAA), cela ressemblerait à ceci:Intl.DateTimeFormatconst firstValentineOfTheDecade = new Date(2020, 1, 14); // 1 for February const enUSFormatter = new Intl.DateTimeFormat('en-US'); console.log(enUSFormatter.format(firstValentineOfTheDecade)); // 2/14/2020 constructeur:comment utiliser le verre google
DateTimeFormatconst nlBEFormatter = new Intl.DateTimeFormat('nl-BE'); console.log(nlBEFormatter.format(firstValentineOfTheDecade)); // 14/2/2020 const longEnUSFormatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric', }); console.log(longEnUSFormatter.format(firstValentineOfTheDecade)); // February 14, 2020 comme de cette écriture sont day ou 'numeric'. Emprunt Version de Flavio Copes de Mathias Bynens’ code pour tirer parti d'une autre partie de '2-digit' pour cela, nous pouvons personnaliser la sortie du jour du mois via Intl:formatToParts()const pluralRules = new Intl.PluralRules('en-US', { type: 'ordinal' }) const suffixes = { 'one': 'st', 'two': 'nd', 'few': 'rd', 'other': 'th' } const convertToOrdinal = (number) => `${number}${suffixes[pluralRules.select(number)]}` // At this point: // convertToOrdinal('1') === '1st' // convertToOrdinal('2') === '2nd' // etc. const extractValueAndCustomizeDayOfMonth = (part) => { if (part.type === 'day') { return convertToOrdinal(part.value); } return part.value; }; console.log( longEnUSFormatter.formatToParts(firstValentineOfTheDecade) .map(extractValueAndCustomizeDayOfMonth) .join('') ); // February 14th, 2020 n'est pas du tout prise en charge par Internet Explorer (IE) au moment de la rédaction de cet article, mais toutes les autres technologies de bureau, mobiles et back-end (c'est-à-dire Node.js) ont du soutien . Pour ceux qui ont besoin de prendre en charge IE et qui ont absolument besoin d'ordinaux, la note ci-dessous (ou mieux, une bibliothèque de dates appropriée) fournit une réponse.formatToParts en Python ou PHP.strftime vous donne strftime('Today is %b %d %Y %X', mktime(5,10,0,12,30,99)).Today is Dec 30 1999 05:10:00 pour obtenir la date dans différents formats. (Attention, toutes les langues n'attribuent pas la même signification à chaque lettre - en particulier, «M» et «m» peuvent être échangés pendant des minutes et des mois.)%var currentDate = new Date(); var date = currentDate.getDate(); var month = currentDate.getMonth(); var year = currentDate.getFullYear(); var monthDateYear = (month+1) + '/' + date + '/' + year; function pad(n) { return n<10 ? '0'+n : n; } var mmddyyyy = pad(month + 1) + '/' + pad(date) + '/' + year; var ddmmyyyy = pad(date) + '-' + pad(month + 1) + '-' + year; var monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; var dateWithFullMonthName = monthNames[month] + ' ' + pad(date) + ', ' + year; qui renvoie 1st pour 1, 12th pour 12 et 103rd pour 103, etc., et le reste est simple:ordinalvar ordinalDate = ordinal(date) + ' ' + monthNames[month] + ', ' + year; Changer le format de la date
var daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; ordinalDateWithDayOfWeek = daysOfWeek[currentDate.getDay()] + ', ' + ordinalDate; Utilisation des fonctions de localisation de l'objet Date JavaScript
const myDate = new Date('Jul 21, 2013'); const dayOfMonth = myDate.getDate(); const month = myDate.getMonth(); const year = myDate.getFullYear(); function pad(n) { return n<10 ? '0'+n : n } const ddmmyyyy = pad(dayOfMonth) + '-' + pad(month + 1) + '-' + year; // '21-07-2013' de l’objet Date méthode:toLocaleDateString()const today = new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', }); .26 Jul 2016 fonctionne de manière très similaire à celle-ci, mais vous permet de réutiliser un objet de formatage de sorte que vous ne devez définir les options qu'une seule fois.Intl.DateTimeFormat, c'est une bonne habitude de toujours transmettre les options de formatage, même si la sortie semble correcte sur votre ordinateur. Cela peut empêcher l'interface utilisateur de se briser dans des paramètres régionaux inattendus avec des noms de mois très longs ou qui semblent gênants à cause de ceux qui sont courts.toLocaleDateString()const today = new Date().toLocaleDateString(undefined, { day: 'numeric', month: 'numeric', year: 'numeric', }); . Si vous voulez vous assurer que le mois et la date ont deux chiffres, modifiez simplement les options:7/26/2016const today = new Date().toLocaleDateString(undefined, { day: '2-digit', month: '2-digit', year: 'numeric', }); . Juste ce que nous voulions!
Code Production La description 07/26/2016'4:21:38 AM' Afficher la version localisée de l'heure uniquement now.toLocaleTimeString()'04: 21: 38 AM ' Afficher l'heure localisée en fonction des options fournies now.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit', });'22/07/2016 à 04:21:38' Afficher la date et l'heure des paramètres régionaux de l'utilisateur now.toLocaleString()'22/07/2016 à 04h21' Afficher la date et l'heure localisées en fonction des options fournies Calcul des dates et heures relatives
now.toLocaleString(undefined, { day: 'numeric', month: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit', });const myDate = new Date('July 20, 2016 15:00:00'); const nextDayOfMonth = myDate.getDate() + 20; myDate.setDate(nextDayOfMonth); const newDate = myDate.toLocaleString(); contient une chaîne localisée représentant cette date. Sur mon navigateur, newDate contient «8/9/2016, 15:00:00».newDate et Date.getTime() pour travailler avec des entiers représentant le nombre de millisecondes depuis une certaine époque, à savoir le 1er janvier 1970. Par exemple, si vous voulez savoir quand il est 17 heures après maintenant:Date.setTime()Comparaison des dates
const msSinceEpoch = (new Date()).getTime(); const seventeenHoursLater = new Date(msSinceEpoch + 17 * 60 * 60 * 1000); const date1 = new Date('July 19, 2014'); const date2 = new Date('July 28, 2014'); if(date1 > date2) { console.log('First date is more recent'); } else { console.log('Second date is more recent'); } const date1 = new Date('June 10, 2003'); const date2 = new Date(date1); const equalOrNot = date1 == date2 ? 'equal' : 'not equal'; console.log(equalOrNot); .not equaldate1.getTime() == date2.getTime() const userEnteredString = '12/20/1989'; // MM/DD/YYYY format const dateStringFromAPI = '1989-12-20T00:00:00Z'; const dateFromUserEnteredString = new Date(userEnteredString) const dateFromAPIString = new Date(dateStringFromAPI); if (dateFromUserEnteredString.getTime() == dateFromAPIString.getTime()) { transferOneMillionDollarsToUserAccount(); } else { doNothing(); } créera une date 1989-12-20T00: 00: 00 + 5: 45 ou 1989-12-19T18: 15: 00Z qui n'est pas la même que 1989-12-20T00: 00: 00Z en termes d'horodatage.
new Date ('12/20/1989')const userEnteredDate = '12/20/1989'; const parts = userEnteredDate.split('/'); const userEnteredDateISO = parts[2] + '-' + parts[0] + '-' + parts[1]; const userEnteredDateObj = new Date(userEnteredDateISO + 'T00:00:00Z'); const dateFromAPI = new Date('1989-12-20T00:00:00Z'); const result = userEnteredDateObj.getTime() == dateFromAPI.getTime(); // true
const userEnteredDate = new Date('1989-12-20'); const dateFromAPI = new Date('1989-12-20T00:00:00Z'); const result = userEnteredDate.getTime() == dateFromAPI.getTime(); // true Trouver la différence entre deux dates
taux horaire consultant vs salaire
Recherche du nombre de jours entre deux dates
const userEnteredDate = new Date('12/20/1989'); const userEnteredDateTimeStamp = Date.UTC(userEnteredDate.getFullYear(), userEnteredDate.getMonth(), userEnteredDate.getDate(), 0, 0, 0); const dateFromAPI = new Date('1989-12-20T00:00:00Z'); const result = userEnteredDateTimeStamp == dateFromAPI.getTime(); // true ... Recherche de l'âge de l'utilisateur à partir de sa date de naissance
const dateFromAPI = '2016-02-10T00:00:00Z'; const now = new Date(); const datefromAPITimeStamp = (new Date(dateFromAPI)).getTime(); const nowTimeStamp = now.getTime(); const microSecondsDiff = Math.abs(datefromAPITimeStamp - nowTimeStamp); // Math.round is used instead of Math.floor to account for certain DST cases // Number of milliseconds per day = // 24 hrs/day * 60 minutes/hour * 60 seconds/minute * 1000 ms/second const daysDiff = Math.round(microSecondsDiff / (1000 * 60 * 60 * 24)); console.log(daysDiff); const birthDateFromAPI = '12/10/1989'; Suggestions pour éviter l'enfer des rendez-vous
Obtenir DateTime de l'utilisateur
const parts = birthDateFromAPI.split('/'); const birthDateISO = parts[2] + '-' + parts[0] + '-' + parts[1]; const birthDate = new Date(birthDateISO); const today = new Date(); let age = today.getFullYear() - birthDate.getFullYear(); if(today.getMonth() Date format même si vous avez déjà la date dans un format analysable valide. Si tous les programmeurs de votre équipe suivent cette règle simple, il sera extrêmement facile de maintenir le code à long terme car il est aussi explicite que possible avec le new Date(year, month, day, hours, minutes, seconds, milliseconds) constructeur.Date est identique à new Date(2012, 10, 12) car les paramètres non spécifiés sont par défaut à zéro.new Date(2012, 10, 12, 0, 0, 0, 0)Obtenir uniquement la date
const dateFromPicker = '2012-10-12'; const timeFromPicker = '12:30'; const dateParts = dateFromPicker.split('-'); const timeParts = timeFromPicker.split(':'); const localDate = new Date(dateParts[0], dateParts[1]-1, dateParts[2], timeParts[0], timeParts[1]); const dateFromPicker = '12/20/2012'; const dateParts = dateFromPicker.split('/'); const ISODate = dateParts[2] + '-' + dateParts[0] + '-' + dateParts[1]; const birthDate = new Date(ISODate).toISOString(); objet avec l'entrée au format de date ISO valide (AAAA-MM-JJ), il sera par défaut UTC au lieu de par défaut le fuseau horaire du navigateur.Stockage de la date
Date ou toISOString() méthodes de l'objet Date pour convertir le DateTime local en UTC.toJSON()Affichage de la date et de l'heure
const dateFromUI = '12-13-2012'; const timeFromUI = '10:20'; const dateParts = dateFromUI.split('-'); const timeParts = timeFromUI.split(':'); const date = new Date(dateParts[2], dateParts[0]-1, dateParts[1], timeParts[0], timeParts[1]); const dateISO = date.toISOString(); $.post('http://example.com/', {date: dateISO}, ...) objet.Date ou toLocaleString() et toLocaleDateString() méthodes ou une bibliothèque de dates pour afficher l'heure locale.toLocaleTimeString()Quand faut-il aussi stocker l'heure locale?
const dateFromAPI = '2016-01-02T12:30:00Z'; const localDate = new Date(dateFromAPI); const localDateString = localDate.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric', }); const localTimeString = localDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit', }); La fonction nous indique le nombre de minutes qui, lorsqu'il est ajouté à une heure locale donnée, donne l'heure UTC équivalente. Je suggère de le convertir au format (+ -) hh: mm car cela rend plus évident qu'il s'agit d'un décalage de fuseau horaire.getTimeZoneOffset()const now = new Date(); const tz = now.gettime zoneOffset(); const sign = tz > 0 ? '-' : '+'; const hours = pad(Math.floor(Math.abs(tz)/60)); const minutes = pad(Math.abs(tz)%60); const tzOffset = sign + hours + ':' + minutes; const localDateTime = now.getFullYear() + '-' + pad(now.getMonth()+1) + '-' + pad(now.getDate()) + 'T' + pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds()); const eventDate = { utc: now.toISOString(), local: localDateTime, tzOffset: tzOffset, } fonction.getHours()const localDateString = eventDate.local; const localDate = new Date(localDateString); if(localDate.getHours() <12) { console.log('Event happened before noon local time'); } ici, mais nous le stockons toujours car nous pourrions en avoir besoin à l'avenir à des fins de débogage. Vous pouvez en fait simplement envoyer le décalage du fuseau horaire et l'heure UTC uniquement. Mais j'aime aussi stocker l'heure locale car vous devrez éventuellement stocker la date dans une base de données et avoir l'heure locale stockée séparément vous permet d'interroger directement en fonction d'un champ plutôt que d'avoir à effectuer des calculs pour obtenir la date locale.Configuration du serveur et de la base de données
Il est temps d'améliorer la gestion des dates
