TOC

Comprendre la date et l’heure en JavaScript

introduction

La date et l’heure font partie de notre quotidien et occupent donc une place importante dans la programmation informatique. En JavaScript, vous devrez peut-être créer un site Web avec un calendrier, un horaire de train ou une interface pour définir des rendez-vous. Ces applications doivent afficher les heures pertinentes en fonction du fuseau horaire actuel de l’utilisateur ou effectuer des calculs autour des arrivées et des départs ou des heures de début et de fin. En outre, vous devrez peut-être utiliser JavaScript pour générer un rapport tous les jours à une certaine heure ou pour filtrer les restaurants et établissements actuellement ouverts.

Pour atteindre tous ces objectifs et plus encore, JavaScript est livré avec l’objet + Date intégré et les méthodes associées. Ce tutoriel va expliquer comment formater et utiliser la date et l’heure en JavaScript.

L’objet date

L’objet + Date + https://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript[ est un objet intégré à JavaScript qui stocke la date et l’heure. Il fournit un certain nombre de méthodes intégrées pour formater et gérer ces données.

Par défaut, une nouvelle instance + Date + sans arguments fournis crée un objet correspondant à la date et à l’heure actuelles. Ceci sera créé en fonction des paramètres système de l’ordinateur actuel.

Pour illustrer la + Date + de JavaScript, créons une variable et affectez-lui la date du jour. Cet article est écrit le mercredi 18 octobre à Londres (GMT). Il s’agit donc de la date, de l’heure et du fuseau horaire actuels représentés ci-dessous.

maintenant.js

// Set variable to current date and time
const now = new Date();

// View the output
now;
OutputWed Oct 18 2017 12:41:34 GMT+0000 (UTC)

En regardant la sortie, nous avons une chaîne de date contenant les éléments suivants:

Day of the Week Month Day Year Hour Minute Second Timezone

Wed

Oct

18

2017

12

41

34

GMT+0000 (UTC)

La date et l’heure sont décomposées et imprimées d’une manière compréhensible pour l’homme.

Cependant, JavaScript comprend la date en fonction d’un * timestamp * dérivé de Unix time, qui correspond au nombre de millisecondes écoulées depuis minuit. le 1er janvier 1970. Nous pouvons obtenir l’horodatage avec la méthode + getTime () +.

// Get the current timestamp
now.getTime();
Output1508330494000

Le grand nombre qui apparaît dans notre sortie pour l’horodatage actuel représente la même valeur que ci-dessus, le 18 octobre 2017.

  • L’heure d’époque *, également appelée heure zéro, est représentée par la chaîne de date +01 janvier, 1970 00:00:00 heure universelle (UTC) +, et par l’horodatage + 0 +. Nous pouvons tester cela dans le navigateur en créant une nouvelle variable et en lui affectant une nouvelle instance + Date + basée sur un horodatage de + 0 +.

epoch.js

// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);

epochTime;
Output01 January, 1970 00:00:00 Universal Time (UTC)

Epoch time a été choisi comme norme pour permettre aux ordinateurs de mesurer le temps au début de la programmation, et c’est la méthode utilisée par JavaScript. Il est important de comprendre le concept de l’horodatage et de la chaîne de date, car ces deux paramètres peuvent être utilisés en fonction des paramètres et de l’objectif de l’application.

Jusqu’ici, nous avons appris à créer une nouvelle instance + Date en fonction de l’heure actuelle et à en créer une en fonction d’un horodatage. Au total, il existe quatre formats pour créer une nouvelle + Date en JavaScript. Outre l’heure et l’heure par défaut, vous pouvez également utiliser une chaîne de date ou spécifier des dates et des heures particulières.

Date Creation Output

new Date()

Current date and time

new Date(timestamp)

Creates date based on milliseconds since Epoch time

new Date(date string)

Creates date based on date string

new Date(year, month, day, hours, minutes, seconds, milliseconds)

Creates date based on specified date and time

Pour illustrer les différentes manières de faire référence à une date spécifique, nous allons créer de nouveaux objets + Date + qui représenteront le 4 juillet 1776 à 12h30 pm de trois manières différentes.

usa.js

// Timestamp method
new Date(-6106015800000);

// Date string method
new Date("January 31 1980 12:30");

// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);

Les trois exemples ci-dessus créent tous une date contenant les mêmes informations.

Vous remarquerez que la méthode d’horodatage a un nombre négatif; toute date antérieure à Epoch sera représentée par un nombre négatif.

Dans la méthode date et heure, nos secondes et millisecondes sont définies sur + 0 +. Si un nombre est manquant dans la + Date créée, il sera par défaut à` + 0 + . Cependant, l’ordre ne peut pas être modifié, alors gardez cela à l’esprit si vous décidez de laisser un numéro. Vous remarquerez peut-être aussi que le mois de juillet est représenté par «+ 6 +» et non par le «+ 7 +» habituel. En effet, les chiffres de date et heure commencent à partir de `+ 0 +, comme le font généralement les programmes. Voir la section suivante pour un tableau plus détaillé.

Récupérer la date avec + get +

Une fois que nous avons une date, nous pouvons accéder à tous les composants de la date avec diverses méthodes intégrées. Les méthodes renverront chaque partie de la date par rapport au fuseau horaire local. Chacune de ces méthodes commence par + get + et renvoie le nombre relatif. Vous trouverez ci-dessous un tableau détaillé des méthodes + get de l’objet` + Date`.

Date/Time Method Range Example

Year

getFullYear()

YYYY

1970

Month

getMonth()

0-11

0 = January

Day (of the month)

getDate()

1-31

1 = 1st of the month

Day (of the week)

getDay()

0-6

0 = Sunday

Hour

getHours()

0-23

0 = midnight

Minute

getMinutes()

0-59

Second

getSeconds()

0-59

Millisecond

getMilliseconds()

0-999

Timestamp

getTime()

Milliseconds since Epoch time

Faisons une nouvelle date, basée sur le 31 juillet 1980, et assignons-la à une variable.

harryPotter.js

// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);

Maintenant, nous pouvons utiliser toutes nos méthodes pour obtenir chaque composant de date, d’année en milliseconde.

getDateComponents.js

birthday.getFullYear();      // 1980
birthday.getMonth();         // 6
birthday.getDate();          // 31
birthday.getDay();           // 4
birthday.getHours();         // 0
birthday.getMinutes();       // 0
birthday.getSeconds();       // 0
birthday.getMilliseconds();  // 0
birthday.getTime();          // 333849600000 (for GMT)

Parfois, il peut être nécessaire d’extraire seulement une partie de la date, et les méthodes intégrées + get + sont l’outil que vous utiliserez pour y parvenir.

Par exemple, nous pouvons comparer la date actuelle au jour et au mois du 3 octobre pour déterminer s’il s’agit ou non du 3 octobre.

oct3.js

// Get today's date
const today = new Date();

// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
 console.log("It's October 3rd.");
} else {
 console.log("It's not October 3rd.");
}
OutputIt's not October 3rd.

Depuis le moment où nous écrivons, ce n’est pas le 3 octobre, la console en est le reflet.

Les méthodes intégrées + Date qui commencent par` + get` nous permettent d’accéder aux composants de date qui renvoient le nombre associé à ce que nous récupérons à partir de l’objet instancié.

Modification de la date avec + set +

Pour toutes les méthodes + get que nous avons apprises ci-dessus, il existe une méthode` + set` correspondante. Où + get + est utilisé pour récupérer un composant spécifique à partir d’une date, + set + est utilisé pour modifier les composants d’une date. Voici un tableau détaillé des méthodes + set of de l’objet` + Date`.

Date/Time Method Range Example

Year

setFullYear()

YYYY

1970

Month

setMonth()

0-11

0 = January

Day (of the month)

setDate()

1-31

1 = 1st of the month

Day (of the week)

setDay()

0-6

0 = Sunday

Hour

setHours()

0-23

0 = midnight

Minute

setMinutes()

0-59

Second

setSeconds()

0-59

Millisecond

setMilliseconds()

0-999

Timestamp

setTime()

Milliseconds since Epoch time

Nous pouvons utiliser ces méthodes + set + pour modifier un, plusieurs ou tous les composants d’une date. Par exemple, nous pouvons changer l’année de notre variable + anniversaire + 'en partant de + 1997 + au lieu de' + 1980 +.

harryPotter.js

// Change year of birthday date
birthday.setFullYear(1997);

birthday;
OutputThu Jul 31 1997 00:00:00 GMT+0000 (UTC)

Dans l’exemple ci-dessus, nous voyons que lorsque nous appelons la variable + anniversaire +, nous recevons la nouvelle année dans le cadre de la sortie.

Les méthodes intégrées commençant par + set + nous permettent de modifier différentes parties d’un objet + Date.

Méthodes de date avec UTC

Les méthodes + get + décrites ci-dessus extraient les composants de date en fonction des paramètres de fuseau horaire local de l’utilisateur. Pour un meilleur contrôle des dates et des heures, vous pouvez utiliser les méthodes + getUTC +, qui sont exactement les mêmes que les méthodes + get +, sauf qu’elles calculent l’heure en fonction de la https://en.wikipedia.org/ wiki / Coordinated_Universal_Time [UTC (temps universel coordonné)] standard. Vous trouverez ci-dessous un tableau des méthodes UTC pour l’objet JavaScript + Date.

Date/Time Method Range Example

Year

getUTCFullYear()

YYYY

1970

Month

getUTCMonth()

0-11

0 = January

Day (of the month)

getUTCDate()

1-31

1 = 1st of the month

Day (of the week)

getUTCDay()

0-6

0 = Sunday

Hour

getUTCHours()

0-23

0 = midnight

Minute

getUTCMinutes()

0-59

Second

getUTCSeconds()

0-59

Millisecond

getUTCMilliseconds()

0-999

Pour tester la différence entre les méthodes locales et UTC + get +, nous pouvons exécuter le code suivant.

UTC.js

// Assign current time to a variable
const now = new Date();

// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());

L’exécution de ce code affichera l’heure actuelle et l’heure du fuseau horaire UTC. Si vous êtes actuellement dans le fuseau horaire UTC, les numéros générés à partir de l’exécution du programme ci-dessus seront les mêmes.

UTC est utile dans la mesure où il fournit une référence de temps international et permet donc de garder votre code cohérent sur tous les fuseaux horaires si cela s’applique à ce que vous développez.

Conclusion

Dans ce tutoriel, nous avons appris à créer une instance de l’objet + Date + et à utiliser ses méthodes intégrées pour accéder aux composants d’une date spécifique et les modifier. Pour une vue plus détaillée des dates et des heures en JavaScript, vous pouvez lire la référence Date sur Mozilla Developer. Réseau.

Savoir utiliser les dates est essentiel pour de nombreuses tâches courantes en JavaScript, car cela peut vous permettre de faire beaucoup de choses, de la configuration d’un rapport répétitif à l’affichage des dates et des planifications dans le fuseau horaire approprié.

Related