Tout ce que vous devez savoir sur la date en javascript

Les objets de date de JavaScript sont souvent déroutants que nous nous tournons vers les bibliothèques (telles que les DAT-FNS et le moment) chaque fois que nous avons besoin de traiter les dates et les heures.

Mais nous n'avons pas toujours besoin de bibliothèques. Si vous savez à quoi faire attention, la date peut être très simple. Dans cet article, je vous guiderai à travers l'objet Date.

Tout d'abord, reconnaissons l'existence de fuseaux horaires.

Fuseau horaire

Il y a des centaines de fuseaux horaires dans le monde. En JavaScript, nous ne nous soucions que de deux choses - le temps local et le temps universel coordonné (UTC).

• Le temps local fait référence au fuseau horaire où se trouve votre ordinateur.
• L'UTC est synonyme de Greenwich Moyenne Temps (GMT) dans la pratique.

Par défaut, presque toutes les méthodes de date de JavaScript (sauf une) fournissent la date / l'heure pour l'heure locale. Vous ne pouvez obtenir UTC que lorsque vous spécifiez UTC.

Avec ceux-ci, nous pouvons discuter des dates de création.

Date de création

Vous pouvez créer des dates en utilisant new Date() . Il existe quatre façons possibles d'utiliser new Date() :

1. Utiliser la chaîne de date
2. Utiliser les paramètres de date
3. Utiliser l'horodatage
4. Sans paramètres

Méthode de chaîne de date

Dans la méthode de la chaîne de date, vous pouvez créer une date en passant la chaîne de date à new Date .

 Nouvelle date («1988-03-21»)

Nous avons tendance à utiliser des méthodes de chaîne de date lors de la rédaction de dates. Ceci est naturel car nous utilisons des chaînes de dattes toutes nos vies.

Si j'écrivais 21-03-1988, vous n'auriez aucune question que c'était le 21 mars 1988. Non? Mais si vous écrivez 21-03-1988 en JavaScript, vous obtenez Invalid Date .

Cela a une bonne raison.

Nous interprétons les chaînes de dattes différemment dans différentes parties du monde. Par exemple, le 11-06-2019 peut être le 11 juin 2019 ou le 6 novembre 2019. Mais vous ne pouvez pas être sûr lequel je fais référence à moins que vous connaissiez le système de date que j'utilise.

Dans JavaScript, si vous souhaitez utiliser une chaîne de date, vous devez utiliser un format accepté dans le monde entier. L'un de ces formats est le format étendu ISO 8601.

 <code>// ISO 8601 扩展格式`YYYY-MM-DDTHH:mm:ss.sssZ`</code>

Voici ce que signifie la valeur:

• Yyyy: 4 chiffres d'années
• MM: mois à 2 chiffres (01 en janvier, 12 en décembre)
• DD: date à 2 chiffres (0 à 31)
• -: séparateur de date
• T: indique le début des temps
• HH: 24 chiffres (0 à 23)
• mm: minutes (0 à 59)
• SS: secondes (0 à 59)
• SSS: millisecondes (0 à 999)
• :: séparateur de temps
• Z: Si z existe, la date sera définie sur UTC. Si z n'existe pas, c'est l'heure locale. (Cela ne s'applique qu'aux cas où le temps est fourni.)

Si vous créez une date, des heures, des minutes, des secondes et des millisecondes sont facultatifs. Donc, si vous souhaitez créer une date pour le 11 juin 2019, vous pouvez écrire ceci:

 Nouvelle date ('2019-06-11')

Veuillez y porter une attention particulière. Il y a un gros problème dans la création de dates à l'aide de chaînes de dattes. Si vous console.log cette date, vous pouvez trouver le problème.

Si vous vivez dans une zone derrière GMT, vous obtiendrez une date affichée comme le 10 juin.

Si vous vivez dans une zone menant à GMT, vous obtiendrez une date affichée comme le 11 juin.

Cela se produit parce que la méthode de la chaîne de date a un comportement spécial: si vous créez une date (ne spécifiant pas une heure), vous obtenez une date définie sur UTC.

Dans le cas ci-dessus, lorsque vous écrivez new Date('2019-06-11') , la date que vous avez créée était le 11 juin 2019 à 12 h UTC. C'est pourquoi les personnes vivant dans des zones derrière GMT ont le 10 juin au lieu du 11 juin.

Si vous souhaitez créer une date à l'heure locale à l'aide de la méthode de la chaîne de date, vous devez inclure l'heure. Lorsque vous incluez du temps, vous devez écrire au moins HH et MM (sinon Google Chrome renvoie une date non valide).

 Nouvelle date ('2019-06-11T00: 00')

L'heure locale avec le problème UTC avec l'utilisation des chaînes de date peut être une source d'erreurs difficiles à attraper. Par conséquent, je vous recommande de ne pas utiliser les chaînes de date pour créer des dates.

(Soit dit en passant, MDN prévient de ne pas utiliser les méthodes de chaîne de date, car les navigateurs peuvent analyser les chaînes de date de différentes manières).

Si vous souhaitez créer une date, utilisez un paramètre ou un horodatage.

Créer une date avec les paramètres

Vous pouvez transmettre jusqu'à sept paramètres pour créer une date / heure.

1. Année: 4 chiffres.
2. Mois: mois (0-11). Des mois commencent à zéro. S'il est omis, la valeur par défaut est 0.
3. Date: date du mois (1-31). S'il est omis, la valeur par défaut est 1.
4. Heure: heures de la journée (0-23). S'il est omis, la valeur par défaut est 0.
5. Minutes: Minutes (0-59). S'il est omis, la valeur par défaut est 0.
6. Secondes: secondes (0-59). S'il est omis, la valeur par défaut est 0.
7. Millisecondes: millisecondes (0-999). S'il est omis, la valeur par défaut est 0.

 // 11 juin 2019, 5:23:59, heure locale nouvelle date (2019, 5, 11, 5, 23, 59)

De nombreux développeurs (moi-même inclus) évitent d'utiliser des méthodes de paramètres car cela semble compliqué. Mais c'est en fait très simple.

Essayez de lire les numéros de gauche à droite. De gauche à droite, vous insérez des valeurs dans une amplitude décroissante: année, mois, jour, heure, minute, deuxième et milliseconde.

 Nouvelle date (2017, 3, 22, 5, 23, 50)

// Si vous suivez la formule de gauche à droite, vous pouvez facilement lire cette date.
// Année: 2017,
// mois: avril (parce que le mois commence à zéro)
// Date: 22
// heures: 05
// Minutes: 23
// secondes: 50

La partie la plus problématique de la date est que la valeur du mois commence à partir de zéro, c'est-à-dire janvier === 0, février === 1, mars === 2, etc.

C'est un peu étrange que JavaScript commence à partir de zéro (apparemment parce que Java le fait), mais plutôt que de discuter pourquoi janvier devrait être 1 (plutôt que 0), il est préférable d'accepter ce mois en JavaScript, commencez à zéro. Une fois que vous avez accepté ce fait, la date devient plus facile à traiter.

Voici quelques autres exemples pour que vous puissiez familiariser:

 // 21 mars 1988 à 12 h, heure locale.
Nouvelle date (1988, 2, 21)

// 25 décembre 2019, 8 h, heure locale.
Nouvelle date (2019, 11, 25, 8)

// 6 novembre 2023, 2 h 20, heure locale nouvelle date (2023, 10, 6, 2, 20)

// 11 juin 2019, 5:23:59, heure locale nouvelle date (2019, 5, 11, 5, 23, 59)

Notez que les dates créées à l'aide de paramètres sont toutes du temps local?

C'est l'un des avantages supplémentaires de l'utilisation des paramètres - vous ne confonderez pas l'heure locale et l'UTC. Si vous avez besoin de UTC, vous pouvez créer des dates dans UTC de cette façon:

 // 11 juin 2019 à 12 h, UTC.
Nouvelle date (Date.Utc (2019, 5, 11))

Créer des dates avec des horodatages

En JavaScript, l'horodatage est le nombre de millisecondes qui passent à partir du 1er janvier 1970 (le 1er janvier 1970 est également connu sous le nom de Unix Epoch Time). D'après mon expérience, vous utilisez rarement des horodatages pour créer des dates. Vous n'utilisez que des horodatages pour comparer différentes dates (plus à ce sujet plus tard).

 // 11 juin 2019, 8h00 (sur mon heure locale, Singapour)
Nouvelle date (1560211200000)

Sans paramètres

Si vous créez une date sans paramètres, vous obtenez la date définie à l'heure actuelle (heure locale).

 Nouvelle date ()

Vous pouvez voir sur l'image que lorsque j'écris ceci, le temps de Singapour est le 25 mai 2019 à 11h10.

Résumé de la date de création

1. Vous pouvez créer des dates en utilisant new Date() .
2. Il y a quatre syntaxes possibles:
   1. Utiliser la chaîne de date
   2. Paramètres d'utilisation
   3. Utiliser l'horodatage
   4. Sans paramètres
3. N'utilisez jamais la méthode de chaîne de date pour créer une date.
4. Il est préférable d'utiliser des méthodes de paramètres pour créer des dates.
5. N'oubliez pas (et acceptez) que les mois en JavaScript commencent de zéro.

Ensuite, parlons de la conversion des dates en chaînes lisibles.

Date de format

La plupart des langages de programmation fournissent des outils de formatage pour créer n'importe quel format de date que vous souhaitez. Par exemple, dans PHP, vous pouvez rédiger date("d MY") comme une date similaire au 23 janvier 2019.

Mais il n'y a pas de moyen facile de formater les dates en JavaScript.

L'objet Date natif est livré avec sept méthodes de formatage. Chacune de ces sept méthodes vous donne une valeur spécifique (et elles sont très inutiles).

 const Date = Nouvelle date (2019, 0, 23, 17, 23, 42)

1. toString vous fournit le mer 23 janvier 2019 17:23:42 GMT 0800 (heure standard de Singapour)
2. toDateString vous fournit le mer 23 janvier 2019
3. toLocaleString vous fournit le 23/01/2019, 17:23:42
4. toLocaleDateString vous fournit 23/01/2019
5. toGMTString vous fournit le merde 23 janvier 2019 09:23:42 GMT
6. toUTCString vous fournit le mer 23 janvier 2019 09:23:42 GMT
7. toISOString vous fournit le 2019-01-23T09: 23: 42.079Z

Si vous avez besoin d'un format personnalisé, vous devez le créer vous-même.

Écrivez un format de date personnalisé

Supposons que vous vouliez quelque chose comme le jeu, le 23 janvier 2019. Pour créer cette valeur, vous devez comprendre (et utiliser) la méthode de date qui vient avec l'objet Date.

Pour obtenir des dates, vous pouvez utiliser ces quatre méthodes:

1. getFullYear : prenez 4 chiffres en fonction de l'heure locale
2. getMonth : Obtenez le mois (0-11) en fonction de l'heure locale. Des mois commencent à zéro.
3. getDate : obtenez la date du mois en fonction de l'heure locale (1-31).
4. getDay : Obtenez le jour de la semaine (0-6) en fonction de l'heure locale. Le jour de la semaine commence le dimanche (0) et se termine le samedi (6).

La création de 23 et 2019 pour jeu, 23 janvier 2019, est simple. Nous pouvons utiliser getFullYear et getDate pour les obtenir.

 const d = nouvelle date (2019, 0, 23)
const anny = d.getlyear () // 2019
const Date = D.GetDate () // 23

Il est difficile d'obtenir du jeu et de janvier.

Pour obtenir janvier, vous devez créer un objet qui mappe les valeurs de douze mois à leurs noms respectifs.

 const mois = {
  0: «janvier»,
  1: «février»,
  2: «mars»,
  3: «avril»,
  4: «mai»,
  5: «juin»,
  6: «juillet»,
  7: «août»,
  8: «septembre»,
  9: «octobre»,
  10: «novembre»,
  11: 'décembre'
}

Étant donné que le mois commence à partir de zéro, nous pouvons utiliser des tableaux au lieu d'objets. Il produit le même résultat.

 const mois = [
  'Janvier',
  'Février',
  'Mars',
  'Avril',
  'Peut',
  'Juin',
  'Juillet',
  'Août',
  'Septembre',
  'Octobre',
  'Novembre',
  'Décembre'
]]

Pour obtenir en janvier, vous avez besoin:

1. Utilisez getMonth pour obtenir le mois à partir de la date.
2. Obtenez le nom du mois à partir months

 const mensIndex = d.getMonth ()
const Monthname = mois [MonthIndex]
Console.log (Name Monthname) // janvier

Version d'abréviation:

 const Monthname = mois [d.getMonth ()]
Console.log (Name Monthname) // janvier

Vous faites de même avec jeu. Cette fois, vous avez besoin d'un tableau contenant sept jours par semaine.

 const Days = [
  'Soleil',
  'Lun',
  'Mar',
  'Épouser',
  'Jeu',
  'Ven',
  'Assis'
]]

alors vous:

1. Utilisez getDay pour obtenir dayIndex
2. Utilisez dayIndex pour obtenir dayName

 const dayIndex = d.getDay ()
const DayName = Days [DayIndex] // Thu

Version d'abréviation:

 const dayname = jours [d.getday ()] // thu

Vous combinez ensuite toutes les variables que vous avez créées pour obtenir la chaîne formatée.

 const Formatted = `$ {dayName}, $ {date} $ {MonthName} $ {année}`
Console.log (formaté) // Thu, 23 janvier 2019

Oui, c'est lourd. Mais une fois que vous avez obtenu l'astuce, c'est impossible.

Si vous devez créer un format personnalisé, vous pouvez utiliser les méthodes suivantes:

1. getHours : Obtenez des heures (0-23) en fonction de l'heure locale.
2. getMinutes : Obtenez des minutes (0-59) en fonction de l'heure locale.
3. getSeconds : Obtenez des secondes (0-59) en fonction de l'heure locale.
4. getMilliseconds : Obtenez des millisecondes (0-999) en fonction de l'heure locale.

Ensuite, parlons de comparer les dates.

Comparez les dates

Si vous voulez savoir si une date est plus tôt ou plus tard qu'un autre, vous pouvez les comparer directement avec>, = et <.>

 const antérieure = nouvelle date (2019, 0, 26)
const ultor = new Date (2019, 0, 27)

console.log (plus tôt <plus tard true><p> Si vous voulez vérifier si deux dates tombent en même temps, il est plus difficile à comparer. Vous ne pouvez pas les comparer en utilisant == ou ===.</p><pre class="brush:php;toolbar:false"> const A = nouvelle date (2019, 0, 26)
const b = nouvelle date (2019, 0, 26)

console.log (a == b) // faux
console.log (a === b) // faux

Pour vérifier si deux dates tombent en même temps, vous pouvez vérifier leurs horodatages à l'aide de getTime .

 const issametime = (a, b) => {
  retour a.getTime () === B.GetTime ()
}

const A = nouvelle date (2019, 0, 26)
const b = nouvelle date (2019, 0, 26)
console.log (issametime (a, b)) // true

Si vous souhaitez vérifier si les deux dates sont le même jour, vous pouvez vérifier leurs valeurs getFullYear , getMonth et getDate .

 const issameday = (a, b) => {
  Retour A.getlyar () === b.
    a.getmonth () === b.getmonth () &&
    a.getDate () === B.GetDate ()
}

Const A = nouvelle date (2019, 0, 26, 10) // 26 janvier 2019, 10h00 const B = nouvelle date (2019, 0, 26, 12) // 26 janvier 2019, 12h00 console.log (Issameday (a, b) // true)

Il y a encore une chose que nous devons présenter.

Obtenez des dates d'une autre date

Il y a deux scénarios possibles où vous devez obtenir la date d'une autre date.

1. Définissez une valeur de date / heure spécifique à partir d'une autre date.
2. Ajouter / soustraire les incréments d'une autre date.

Définir une date / heure spécifique

Vous pouvez définir une date / heure à partir d'une autre date en utilisant ces méthodes:

1. setFullYear : définit une année à 4 chiffres à l'heure locale.
2. setMonth : Réglez le mois à l'heure locale.
3. setDate : définit la date du mois à l'heure locale.
4. setHours : Réglez les heures à l'heure locale.
5. setMinutes : Réglez les minutes à l'heure locale.
6. setSeconds : Définissez des secondes à l'heure locale.
7. setMilliseconds : définissez des millisecondes à l'heure locale.

Par exemple, si vous souhaitez définir la date sur le 15e jour du mois, vous pouvez utiliser setDate(15) .

 const d = nouvelle date (2019, 0, 10)
D.SetDate (15)

console.log (d) // 15 janvier 2019

Si vous souhaitez définir le mois en juin, vous pouvez utiliser setMonth . (N'oubliez pas, des mois en javascript commencent de zéro!)

 const d = nouvelle date (2019, 0, 10)
D.Setmonth (5)

console.log (d) // 10 juin 2019

Remarque: La méthode de paramètre ci-dessus modifie l'objet de date d'origine. En pratique, nous ne devons pas modifier l'objet (la raison est expliquée en détail ici). Nous devons effectuer ces opérations sur le nouvel objet Date.

 const d = nouvelle date (2019, 0, 10)
const newdate = nouvelle date (d)
newdate.setmonth (5)

console.log (d) // 10 janvier 2019 Console.log (newdate) // 10 juin 2019

Ajouter / soustraire les incréments d'une autre date

L'incrément est un changement. L'ajout / soustraction des incréments d'une autre date signifie: vous souhaitez obtenir une date avec une distance de x d'une autre date. Cela peut être x ans, x mois, x jours, etc.

Pour obtenir l'incrément, vous devez connaître la valeur de la date actuelle. Vous pouvez l'obtenir en utilisant la méthode suivante:

1. getFullYear : prenez 4 chiffres en fonction de l'heure locale
2. getMonth : Obtenez le mois (0-11) en fonction de l'heure locale.
3. getDate : obtenez la date du mois en fonction de l'heure locale (1-31).
4. getHours : Obtenez des heures (0-23) en fonction de l'heure locale.
5. getMinutes : Obtenez des minutes (0-59) en fonction de l'heure locale.
6. getSeconds : Obtenez des secondes (0-59) en fonction de l'heure locale.
7. getMilliseconds : Obtenez des millisecondes (0-999) en fonction de l'heure locale.

Il existe deux façons courantes d'ajouter / soustraire les incréments. La première méthode est plus populaire sur Stack Overflow. Il est concis et clair, mais difficile à comprendre. La deuxième méthode est plus verbeuse, mais plus facile à comprendre.

Présentons ces deux méthodes.

Supposons que vous souhaitiez obtenir la date de trois jours à partir d'aujourd'hui. Dans cet exemple, nous supposons également qu'aujourd'hui est le 28 mars 2019. (Il est plus facile d'expliquer lorsque nous utilisons des dates fixes).

La première méthode (méthode de paramètre)

// Supposons aujourd'hui que c'est le 28 mars 2019 const Today = New Date (2019, 2, 28)

Tout d'abord, nous créons un nouvel objet de date (donc nous ne modifions pas la date d'origine)

 const finalDate = nouvelle date (aujourd'hui)

Ensuite, nous devons connaître la valeur que nous voulons modifier. Étant donné que nous modifions la date, nous pouvons utiliser getDate pour obtenir la date.

 const CurrentDate = Today.getDate ()

Nous voulons une date trois jours plus tard que aujourd'hui. Nous ajouterons des incréments (3) à la date actuelle en utilisant.

 finalDate.setDate (CurrentDate 3)

Le code complet pour définir la méthode:

 const Today = New Date (2019, 2, 28)
const finalDate = nouvelle date (aujourd'hui)
finalDate.setDate (Today.getDate () 3)

Console.log (finalDate) // 31 mars 2019

La deuxième méthode (nouvelle méthode de date)

Ici, nous utilisons les méthodes getFullYear , getMonth , getDate et d'autres Getter jusqu'à ce que nous trouvions le type de la valeur que nous voulons modifier. Ensuite, nous utilisons new Date pour créer la date finale.

 const Today = New Date (2019, 2, 28)

// obtient la valeur requise const de l'année = aujourd'hui.getlyar ()
const mois = Today.getMonth ()
const day = Today.getDate ()

// Créer une nouvelle date (avec des incréments)
const finalDate = nouvelle date (année, mois, jour 3)

Console.log (finalDate) // 31 mars 2019

Les deux méthodes fonctionnent. Choisissez-en un et respectez-le.

Correction de date automatique

Si vous fournissez une date avec des valeurs au-delà de sa plage acceptable, JavaScript recalcule automatiquement la date pour vous.

Voici un exemple. Supposons que nous fixions la date au 33 mars 2019 (il n'y a pas de 33 mars sur le calendrier). Dans ce cas, JavaScript ajustera automatiquement le 33 mars au 2 avril.

 // 33 mars => 2 avril nouvelle date (2019, 2, 33)

Cela signifie que lors de la création d'incréments, vous n'avez pas à vous soucier du calcul des minutes, des heures, des dates, des mois, etc. JavaScript le gérera automatiquement pour vous.

 // 33 mars => 2 avril Nouvelle date (2019, 2, 30 3)

C'est tout ce que vous devez savoir sur les objets de date natifs JavaScript.

Plus d'informations sur la date dans JavaScript

• Comprendre les dates et les heures en JavaScript (DigitalOcean)
• Explorez les objets de date JavaScript (Alligator.io)

Intéressé à apprendre plus de javascript?

Si vous trouvez cette date d'introduction utile, vous aimerez peut-être apprendre JavaScript, un cours que j'ai créé pour enseigner aux gens tout ce qu'ils doivent savoir sur JavaScript.

Dans ce cours, je présenterai les concepts de base que vous devez connaître, puis vous montrerai comment utiliser les concepts que vous avez appris pour construire des composants du monde réel.

Jetez un œil. Vous pouvez le trouver utile.

De plus, si vous avez des problèmes JavaScript, n'hésitez pas à me contacter. Je ferai de mon mieux pour créer un article gratuit pour répondre à vos questions.

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!