JavaScript Dates
A reading room opened on Thursday 14 March 2024 at 09:30. Keep that one morning fixed and read it in pieces.
A clock, not a stamp
The search page answered with a slot, with -1, with true or false, or with the stamp itself. Here you build a moment and ask for one part of it.
Six questions, one morning
Match the method to the part you need. A read does not move the clock.
📊 What each reading returns
| Method | The question | What comes back | Easy to mix up |
|---|---|---|---|
getFullYear |
which calendar year | 2024 |
a two-digit year |
getMonth |
which month index | 2 |
expecting 3 for March |
getDate |
which day of the month | 14 |
the weekday |
getDay |
which weekday | 4 |
the day of the month |
getHours |
which hour from 0 to 23 | 9 |
a 12-hour clock |
getMinutes |
which minute | 30 |
the hour |
January is month index 0, so March is 2. Sunday is weekday 0, so Thursday is 4. Neither number is a slot in an array.
The year
Build the opening morning and ask for the calendar year.
let opened = new Date(2024, 2, 14, 9, 30);
console.log(opened.getFullYear());
The console shows 2024. The month you passed was already 2, and that 2 means March.
let opened = new Date(2024, 2, 14, 9, 30);
console.log(opened.getMonth());
The console shows 2. March remains index 2 inside the object. Add 1 only when a person should see a calendar month.
let opened = new Date(2024, 2, 14, 9, 30);
console.log(opened.getDate());
console.log(opened.getDay());
The first line is 14, the day of the month. The second line is 4, Thursday. Those two numbers sit side by side in the API and mean different things.
let opened = new Date(2024, 2, 14, 9, 30);
console.log(opened.getHours());
console.log(opened.getMinutes());
The console shows 9, then 30. Hours run from 0 through 23, so 9 is the morning without a separate AM flag.
let opened = new Date(2024, 2, 14, 9, 30);
let visit = new Date(2024, 2, 20, 15, 0);
console.log(visit.getTime() > opened.getTime());
console.log(visit.getDate());
The comparison prints true, so the visit falls later. The next line is 20, the day of that visit. === would only ask whether the two names point at one object.
The line on the page
Show the year, a display month, and the day. The display month is the stored index plus 1.
<!DOCTYPE html>
<html>
<head>
<title>dates — page</title>
</head>
<body>
<p id="when">…</p>
<script>
let opened = new Date(2024, 2, 14, 9, 30);
let year = opened.getFullYear();
let displayMonth = opened.getMonth() + 1;
let day = opened.getDate();
let box = document.getElementById("when");
box.textContent = year + "-" + displayMonth + "-" + day;
</script>
</body>
</html>
The paragraph reads 2024-3-14. Inside the object the month is still 2. Only the text on the page added 1.
Read it yourself
- Log the year and expect 2024
- Log the month index and expect 2
- Log the day of the month, then the weekday, and expect 14 then 4
- Log the hour, then the minute, and expect 9 then 30
- Log whether the visit is later and expect true, then log 20 for that day
- Read the paragraph and expect 2024-3-14
Easy to mix up
- Passing 3 to
new Datefor March, which builds April - Reading month index 2 as February, or expecting
getMonthto return 3 - Calling
getDaywhen you wanted 14 - Calling
getDatewhen you wanted Thursday’s 4 - Using
===to decide which moment is later - Calling
new Date()with no arguments, so a refresh changes the morning
Keep these apart
- March is month index 2 because January is 0
getDateis the day of the monthgetDayis the weekday, and Sunday is 0getTimegives a number you can put in order- The page adds 1 only for display
- The Math object comes next
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top