Alles wat U Moet Weten Over de Datum in JavaScript

0
37

Datum is raar in JavaScript. Het wordt op onze zenuwen zo veel dat we bereiken voor de bibliotheken (zoals de Datum-fns-Moment en het moment (ha!) we moeten werken met datum en tijd.

Maar we hoeven niet altijd gebruik moeten maken van bibliotheken. Datum kan eigenlijk heel eenvoudig als je weet waar u op moet letten. In dit artikel, ik zal u door alles wat u moet weten over de Datum object.

Laten we eerst de erkenning van het bestaan van tijdzones.

Tijdzones

Er zijn honderden van de tijdzones in onze wereld. In JavaScript, wij alleen de zorg over de twee—de Lokale Tijd en de UTC (Coordinated Universal Time).

  • Plaatselijke tijd verwijst naar de tijdzone van uw computer in.
  • UTC is synoniem met Greenwich Mean Time (GMT) in de praktijk.

Standaard, bijna elke dag-methode in JavaScript (behalve één) geeft je een datum/tijd op de lokale tijd. U krijgt alleen de UTC-als u UTC.

Met dit, kunnen we praten over het maken van data.

Het maken van een date

U kunt een date met new Date(). Er zijn vier manieren om te gebruiken new Date():

  1. Met een datum-string
  2. Met datum argumenten
  3. Met een tijdstempel
  4. Met geen argumenten

De datum-string methode

In de datum-string methode, creëer je een date door het doorgeven van een datum-string in nieuwe Datum.

new Date(‘1988-03-21’)

We hebben de neiging in de richting van de datum-string methode bij het schrijven van data. Dit is natuurlijk omdat we al met datum touwtjes van ons leven.

Als ik schrijf 21-03-1988, heb je geen problemen af te leiden is 21 Maart, 1988. Ja? Maar als je schrijft 21-03-1988 in JavaScript, je krijgt Ongeldige Datum.

new Date(’21-03-1988′) geeft Ongeldige Datum.

Er is een goede reden voor.

We interpreteren datum strings verschillend in verschillende delen van de wereld. Bijvoorbeeld 11-06-2019 is ofwel 11 juni, 2019 of 6 November 2019. Maar je kunt niet zeker welke ik verwijs, tenzij u weet dat de datum systeem dat ik gebruik.

In JavaScript, als u wilt gebruiken een datum string, moet u gebruik maken van een format dat wereldwijd geaccepteerd. Een van deze indelingen is de ISO 8601-Extended-formaat gebruikt.

// De ISO 8601-Extended-formaat
`JJJJ-MM-DDTUU:mm:ss:sssZ`

Hier is wat de waarden betekenen:

  • JJJJ: 4-cijferig jaar
  • MM: 2 cijfers de maand (indien januari is 01 December 12)
  • DD: 2-digit datum (0 tot 31)
  • -: Datum scheidings tekens
  • T: Geeft het begin van de tijd
  • HH: 24-cijferige uur (0 tot en met 23)
  • mm: Minuten (0-59)
  • ss: Seconden (0 tot 59)
  • sss: Milliseconden (0 tot en met 999)
  • :: Tijd scheidings tekens
  • Z: Als Z is aanwezig, de datum worden ingesteld is op UTC. Als Z niet aanwezig is, wordt deze naar de Lokale Tijd. (Dit is alleen van toepassing als de tijd is geleverd.)

Uren, minuten, seconden en milliseconden zijn optioneel als u een datum. Dus, als u wilt maken van een datum voor de 11de juni 2019, u kunt dit schrijf:

new Date(‘2019-06-11’)

Speciale aandacht hier. Er is een enorm probleem met het maken van data met datum snaren. U kunt ter plaatse het probleem als je console.log deze datum.

Als u woont in een gebied dat achter GMT, krijgt u een date die zegt 10 juni.

new Date(‘2019-06-11’) produceert 10 juni, als je in een plek achter op GMT.

Als u woont in een gebied dat de toekomst van GMT, krijgt u een date die zegt 11 juni.

new Date(‘2019-06-11’) produceert 11 juni als u in een plaats bent na GMT.

Dit gebeurt omdat de datum-string methode heeft een eigenaardig probleem: Als u een datum (zonder vermelding van tijd, krijg je een datum in UTC.

In het bovenstaande scenario, wanneer u schrijft new Date(‘2019-06-11’), je eigenlijk het creëren van een datum die zegt 11 juni, 2019, 12 UTC. Dit is de reden waarom mensen die in gebieden leven achter GMT krijgen een 10 juni in plaats van 11 juni.

Als u wilt maken een datum in de Lokale Tijd met de datum-string methode, moet u de tijd opnemen. Als je de tijd die u nodig hebt om het schrijven van de HH en mm met een minimum (of Google Chrome geeft een ongeldige datum).

new Date(‘2019-06-11T00:00’)

Datum aangemaakt in de Lokale Tijd vsl. Datum aangemaakt in UTC.

De hele Lokale Tijd t.o.v. UTC ding met datum-snaren een mogelijke bron van de fout die is moeilijk te vangen. Dus, ik raad je aan het niet maken van data met datum snaren.

(Door de manier, MDN waarschuwt tegen de datum-string aanpak aangezien de browsers kan parseren datum snaren anders).

MDN adviseert tegen het maken van datum-de datum snaren.

Als u wilt maken van data, gebruik argumenten of tijdstempels.

Het maken van data met argumenten

U kunt pas in maximaal zeven argumenten om te maken een datum/tijd.

  1. Jaar: 4-cijferig jaar.
  2. Maand: Maand van het jaar (0-11). Maand nul is geïndexeerd. Standaard ingesteld op 0 als het weggelaten wordt.
  3. Dag: Dag van de maand (1-31). Standaard 1 indien weggelaten.
  4. Uur: Uur van de dag (0-23). Standaard ingesteld op 0 als het weggelaten wordt.
  5. Minuten: Minuten (0-59). Standaard ingesteld op 0 als het weggelaten wordt.
  6. Seconden: Seconden (0-59). Standaard ingesteld op 0 als het weggelaten wordt.
  7. Milliseconden: Milliseconden (0-999). Standaard ingesteld op 0 als het weggelaten wordt.

// 11 juni 2019, 5:23:59am, Plaatselijke Tijd
nieuwe Datum(2019, 5, 11, 5, 23, 59)

Veel ontwikkelaars (inclusief mijzelf) het vermijden van de argumenten benadering, want het ziet er ingewikkeld. Maar het is eigenlijk heel simpel.

Probeer het lezen van getallen van links naar rechts. Als je gaat van links naar rechts, plaatst u de waarden in afnemende grootte: jaar, maand, dag, uren, minuten, seconden en milliseconden.

nieuwe Datum(2017, 3, 22, 5, 23, 50)

// Deze datum kan worden afgelezen als u volg de links-rechts-formule.
// Jaar: 2017,
// Maand: April (vanwege maand is nul-geïndexeerd)
// Datum: 22
// Openingstijden: 05
// Minuut: 23
// Seconden: 50

De meest problematische deel met Datum is die van de Maand waarde is nul-geïndexeerd, zoals in januari === 0, februari === 1, Maart === 2 enzovoort.

We hebben geen idee waarom maand in JavaScript is een nul-geïndexeerd, maar het is. Dan stellen over waarom januari op 1 (en niet 0), is het beter te accepteren dat een maand met een nul is geïndexeerd in JavaScript. Zodra u akkoord met het feit dat data veel makkelijker geworden om te werken met.

Hier zijn een aantal voorbeelden voor u om vertrouwd te raken:

// 21 Maart 1988, 12 uur, Lokale Tijd.
nieuwe Datum(1988, 2, 21)

// 25 December 2019, 8 uur, Lokale Tijd.
nieuwe Datum(2019, 11, 25, 8)

// 6 November 2023, 2:20, Plaatselijke Tijd
nieuwe Datum(2023, 10, 6, 2, 20)

// 11 juni 2019, 5:23:59am, Plaatselijke Tijd
nieuwe Datum(2019, 5, 11, 5, 23, 59)

Kennisgeving data gemaakt met argumenten zijn alle Lokale Tijd?

Dat is een van de voordelen van het gebruik van argumenten—je niet in de war raken tussen de Locale Tijd en de UTC. Als je ooit nodig hebt UTC, maakt u een datum in UTC op deze manier:

// 11 juni 2019, 12 UTC.
nieuwe Datum(Date.UTC(2019, 5, 11))
Het maken van data met tijdstempels

In JavaScript, een timestamp is het aantal milliseconden dat is verstreken sinds 1 januari 1970 1 januari 1970 is ook bekend als Unix epoch tijd). Vanuit mijn ervaring, u zelden gebruikt tijdstempels maken van data. U alleen gebruik maken van timestamps te vergelijken tussen verschillende data (hier later meer over).

// 11 juni 2019, 8u (in mijn Lokale Tijd, Singapore)
nieuwe Datum(1560211200000)
Met geen argumenten

Als u een date zonder enige argumenten, krijg je een datum instellen om de huidige tijd (in Lokale Tijd).

new Date()

De tijd is nu.

Je kunt zien van het beeld dat het op 25 Mei, 11:10 uur in Singapore, toen ik dit artikel schreef.

Overzicht over het maken van data

  1. U kunt de datum aanmaken met new Date().
  2. Er zijn vier mogelijke syntaxis:
    1. Met een datum string
    2. Met argumenten
    3. Met tijdstempel
    4. Met geen argumenten
  3. Nooit maak een date met de datum string methode.
  4. Het is het beste te maken van data met de argumenten methode.
  5. Onthouden (en accepteren) van die maand is de nul-geïndexeerd in JavaScript.

Daarna laten we praten over het converteren van een datum in een leesbare string.

De opmaak van een datum

De meeste programmeertalen geven u een opmaak tool voor het maken van een datumnotatie die u wilt. Bijvoorbeeld in PHP, kunt u schrijven date(“d-M-Y”) om een datum als 23 Jan 2019.

Maar er is geen eenvoudige manier om een datum in JavaScript.

De native Datum object komt met zeven opmaak methoden. Elk van deze zeven methoden geven u een specifieke waarde (en ze zijn vrij nutteloos).

const datum = new Date(2019, 0, 23, 17, 23, 42)

  1. toString geeft u Wo Jan 23 2019 17:23:42 GMT+0800 (Singapore Tijd)
  2. toDateString geeft u Wo Jan 23 2019
  3. toLocaleString geeft u 23/01/2019, 17:23:42
  4. toLocaleDateString geeft u 23/01/2019
  5. toGMTString geeft u Wed, 23 Jan 2019 09:23:42 GMT
  6. toUTCString geeft u Wed, 23 Jan 2019 09:23:42 GMT
  7. toISOString geeft u 2019-01-23T09:23:42.079 Z

Als u een aangepast formaat, die u nodig hebt om hem zelf te creëren.

Het schrijven van een aangepaste datum-formaat

Laten we zeggen dat je iets wilt, zoals Thu, 23 januari 2019. Voor het maken van deze waarde, moet u om te weten (en te gebruiken) de datum methoden die komt met de Datum object.

Om data, kunt u gebruik maken van deze vier methoden:

  1. getFullYear: Krijgt 4-cijferig jaartal volgens de plaatselijke tijd
  2. getMonth: Krijgt maand van het jaar (0-11) volgens de lokale tijd. Maand nul is geïndexeerd.
  3. getDate: Krijgt dag van de maand (1-31) volgens de lokale tijd.
  4. getDay: Krijgt de dag van de week (0-6) volgens de lokale tijd. Dag van de week begint met de zondag (0) en eindigt op zaterdag (6).

Het is eenvoudig om te maken 23 en 2019 voor Thu, 23 januari 2019. We kunnen gebruik maken van getFullYear en getDate om ze te krijgen.

const d = new Date(2019, 0, 23)
const jaar = d.getFullYear() // 2019
const datum = d.getDate() // 23

Het is moeilijker om je Do en januari.

Om januari, moet u een object maakt, dat kaarten de waarde van alle twaalf maanden van hun respectieve namen.

const maanden = {
0: ‘januari’,
1: ‘februari’,
2: ‘Maart’,
3: ‘April’,
4: ‘Mei’,
5: ‘juni’,
6: ‘juli’,
7: ‘augustus’,
8: ‘September’,
9: ‘oktober’,
10: ‘November’,
11: ‘December’
}

Sinds Maanden is de nul-geïndexeerd, kunnen we gebruik maken van een array in plaats van een object. Het levert dezelfde resultaten op.

const maanden = [
‘Januari’,
‘Februari’,
‘Maart’,
‘April’,
‘Mei’,
‘Juni’,
‘Juli’,
‘Augustus’,
‘September’,
‘Oktober’,
‘November’,
‘December’
]

Om januari, moet u:

  1. Gebruik getMonth om de nul-geïndexeerd maand, te rekenen vanaf de datum.
  2. Voor de naam van de maand van de maanden

const monthIndex = d.getMonth()
const monthName = maanden(monthIndex)
console.log(monthName) // januari

De verkorte versie:

const monthName = maanden(d.getMonth())
console.log(monthName) // januari

Je doet het zelfde ding te krijgen Do. Dit keer, moet u een matrix met zeven dagen van de week.

const dagen = [
‘Zon’,
‘Ma’,
‘Di’,
‘Wo’,
‘Do’,
‘Vr’,
‘Za’
]

Dan heeft u:

  1. Voor dayIndex met getDay
  2. Gebruik dayIndex te krijgen dayName

const dayIndex = d.getDay()
const dayName = dagen[dayIndex] // Do

Korte versie:

const dayName = dagen[d.getDay()] // Do

Dan combineert u alle variabelen die je hebt gemaakt om de geformatteerde string.

const geformatteerd = `${dayName}, ${date} ${monthName} ${jaar}`
console.log(geformatteerd) // Thu, 23 januari 2019

Ja, het is vervelend. Maar het is niet onmogelijk als je eenmaal de smaak te pakken.

Als je ooit nodig hebt voor het maken van een aangepaste opgemaakt tijd, u kunt de volgende methoden gebruiken:

  1. getHours: Krijgt uur (0-23) volgens de lokale tijd.
  2. getMinutes: Krijgt minuten (0-59) volgens de lokale tijd.
  3. getSeconds: Krijgt seconden (0-59) volgens de lokale tijd.
  4. getMilliseconds: Krijgt milliseconden (0-999) volgens de lokale tijd.

Daarna laten we praten over het vergelijken van data.

Het vergelijken van data

Als u wilt weten of een datum vóór of na een andere datum, kunt u ze vergelijken rechtstreeks met >, <, >= en <=.

const eerdere = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(eerdere < later) // waar

Het is moeilijker als je wilt controleren of twee datums vallen precies op hetzelfde moment. U kan niet vergeleken met == of ===.

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

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

Om te controleren of twee datums vallen precies op hetzelfde moment, kunt u controleren hun tijdstempels met getTime.

const isSameTime = (a, b) => {
retourneren.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // waar

Als u wilt controleren of twee datums vallen op dezelfde dag, u kunt uw getFullYear, getMonth en getDate waarden.

const isSameDay = (a, b) => {
retourneren.getFullYear() === b.getFullYear() &&
een.getMonth() === b.getMonth() &&
een.getDate()=== b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10 uur
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
console.log(isSameDay(a, b)) // waar

Er is een laatste ding dat we hebben om te dekken.

Het krijgen van een datum van een andere datum

Er zijn twee mogelijke scenario ‘ s waar wilt u naar een datum van een andere datum.

  1. Een specifieke datum/tijd-waarde uit een andere datum.
  2. Optellen/aftrekken een delta van een andere datum.

Het instellen van een specifieke datum/tijd

U kunt gebruik maken van deze methoden op een datum/tijd vanaf een andere datum:

  1. setFullYear: Set 4-cijferige jaar in Lokale Tijd.
  2. setMonth: Stel de maand van het jaar in de Lokale Tijd.
  3. sin: vaste dag van de maand in de Lokale Tijd.
  4. setHours: Stel de uren in met de Lokale Tijd.
  5. setMinutes: Stel de minuten in met de Lokale Tijd.
  6. setSeconds: Stel seconden in de Lokale Tijd.
  7. setMilliseconds: Stel milliseconden in de Lokale Tijd.

Bijvoorbeeld, als je wilt om een datum voor de 15e van de maand, kunt u gebruik maken van setDate(15).

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 15 januari 2019

Als u wilt instellen van de maand juni, kunt u gebruik maken van setMonth. (Vergeet niet, maand in JavaScript is een nul-geïndexeerd!)

const d = new Date(2019, 0, 10)
d.setMonth(5)

console.log(d) // 10 juni 2019

Opmerking: De setter bovenstaande methoden muteren van de oorspronkelijke datum object. In de praktijk moeten we niet muteren objecten (meer over de reden waarom hier). We moeten deze bewerkingen uitvoeren op een nieuwe datum object in de plaats.

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 10 januari 2019
console.log(newDate) // 10 juni 2019
Op te tellen/af te Trekken van delta vanaf een andere datum

Een delta is een verandering. Door het toevoegen van/het aftrekken van delta vanaf een andere datum, ik bedoel dit: wilt U een datum dat X vanaf een andere datum. Het kan worden X jaar X maand, X dag, enz.

Om een delta, moet u weten wat de huidige datum waarde. U kunt het gebruik van deze methoden:

  1. getFullYear: Krijgt 4-cijferig jaartal volgens de plaatselijke tijd
  2. getMonth: Krijgt maand van het jaar (0-11) volgens de lokale tijd.
  3. getDate: Krijgt dag van de maand (1-31) volgens de lokale tijd.
  4. getHours: Krijgt uur (0-23) volgens de lokale tijd.
  5. getMinutes: Krijgt minuten (0-59) volgens de lokale tijd.
  6. getSeconds: Krijgt seconden (0-59) volgens de lokale tijd.
  7. getMilliseconds: Krijgt milliseconden (0-999) volgens de lokale tijd.

Er zijn twee algemene benaderingen toevoegen of aftrekken van een delta. De eerste benadering is meer populair aan Stack Overflow. Het is beknopt, maar moeilijker te begrijpen. De tweede benadering is meer uitgebreid, maar makkelijker te begrijpen.

Ga door beide benaderingen.

Stel, je wil een date die drie dagen na vandaag. Voor dit voorbeeld, laten we ook aannemen dat vandaag is het 28 Maart 2019. (Het is gemakkelijker om uit te leggen wanneer we werken met een vaste datum).

De eerste benadering (de set-aanpak)
// Neemt vandaag is het 28 Maart 2019
const vandaag = new Date(2019, 2, 28)

Eerst maken we een nieuwe Datum object (zodat we niet muteren van de oorspronkelijke datum)

const finalDate = new Date(vandaag)

Vervolgens moeten we de waarde die we willen wijzigen. Sinds we veranderen dagen, kunnen wij de dag met getDate.

const currentDate = vandaag.getDate()

We willen een date die drie dagen na vandaag. We gebruiken voeg de delta (3) om de huidige datum.

finalDate.setDate(currentDate + 3)

De volledige code voor het instellen van aanpak:

const vandaag = new Date(2019, 2, 28)
const finalDate = new Date(vandaag)
finalDate.setDate(vandaag.getDate() + 3)

console.log(finalDate) // 31 Maart 2019
De tweede benadering (de nieuwe Datum benadering)

We gebruiken hier getFullYear, getMonth, getDate en andere getter methoden totdat we in het type van de waarde die we willen wijzigen. Vervolgens gebruiken we het maken van de definitieve datum met de nieuwe Datum.

const vandaag = new Date(2019, 2, 28)

// Aan de vereiste waarden
const jaar = vandaag.getFullYear()
const maand = vandaag.getMonh()
const dag = vandaag.getDate()

// Het maken van een nieuwe Datum (de delta)
const finalDate = new Date(jaar, maand, dag + 3)

console.log(finalDate) // 31 Maart 2019

Beide benaderingen werken. Kies één en de stok met het.

Automatische correctie van de datum

Als u de Datum met een waarde die buiten het toegestane bereik, JavaScript-berekent de datum automatisch voor u.

Hier is een voorbeeld. Laten we zeggen dat we de set date 33e Maart 2019. (Er is geen 33e Maart op de kalender). In dit geval, JavaScript past 33e Maart tot 2 April automatisch.

// 33e Maart => 2e April
nieuwe Datum(2019, 2, 33)

33e Maart wordt geconverteerd naar 2 April automatisch.

Dit betekent dat je niet zorgen hoeft te maken over het berekenen van minuten, uren, dagen, maanden, enz. bij het maken van een delta. JavaScript doet het automatisch voor u.

// 33e Maart => 2e April
nieuwe Datum(2019, 2, 30 + 3)

30 + 3 = 33. 33e Maart wordt geconverteerd naar 2 April automatisch.

En dat is alles wat u moet weten over JavaScript native-Date object.

Geïnteresseerd om meer te leren van JavaScript?

Als u vond dit intro-to-Date handig, je kan de liefde Leren van JavaScript, een cursus die ik gemaakt om mensen alles wat ze moeten weten over JavaScript.

In de cursus behandel ik de basis concepten van wat u moet weten, dan toon ik u hoe u de concepten die je geleerd om te bouwen in de echte wereld componenten.

Neem een kijkje. U vindt het misschien nuttig.

In de tussentijd, als u een JavaScript vragen, voel je vrij om contact met mij op. Dat doe ik door het beste te maken van de gratis artikelen om uw vragen te beantwoorden.