javascript-course-chapter-10
Chapter 10: Dates and Time
Learn how JavaScript works with dates, time, timestamps, formatting, time zones, comparison, and scheduling.
Goal: Understand how to create, read, format, compare, and calculate dates in JavaScript.
10.1 Date Object
The Date object is JavaScript’s built-in tool for working with dates and time.
It can store years, months, days, hours, minutes, seconds, and milliseconds.
You can create a Date object for the current moment or for a specific date.
Dates are useful in calendars, reminders, booking systems, logs, countdowns, and reports.
Beginners should know that JavaScript months start from 0 when using number-based dates.
That means January is 0, February is 1, and December is 11.
Example: Create a specific date
// Create a Date object.
// Year: 2026
// Month: 0 means January
// Day: 15
let myDate = new Date(2026, 0, 15);
// Print the date.
console.log(myDate);
// Output:
// Thu Jan 15 2026 ...
Code Explanation:
new Date() creates a date object.
The month number is 0 because JavaScript counts months from 0.
The output may show extra time and timezone information depending on the browser.
10.2 Current Date
The current date means the date and time right now.
JavaScript can read the current date from the user’s computer or device.
This is useful for showing today’s date, saving login times, or creating timestamps.
When you call new Date() without values, JavaScript creates the current date and time.
The current date changes every moment.
Because of that, your output may be different from another user’s output.
Example: Get current date
// Create a Date object for right now.
let now = new Date();
// Print the current date and time.
console.log(now);
// Output:
// Current date and time from your device
Code Explanation:
Empty new Date() means “give me the current date and time.”
The output depends on the user’s computer, timezone, and current moment.
This is why the output is not fixed.
10.3 Formatting
Formatting means changing how a date looks when shown to users.
Raw Date objects can be long and difficult to read.
JavaScript provides methods like toDateString(), toLocaleDateString(), and toLocaleTimeString().
Formatting helps make dates friendly for websites and apps.
For example, users may prefer “June 22, 2026” instead of a long technical date.
Good formatting makes your project easier to understand.
Example: Format a date
// Create a date.
let date = new Date(2026, 5, 22);
// Show a simple readable date.
console.log(date.toDateString());
// Show local date format.
console.log(date.toLocaleDateString());
// Output:
// Mon Jun 22 2026
// 6/22/2026
Code Explanation:
toDateString() gives a readable English-style date.
toLocaleDateString() formats the date based on local settings.
Different countries may show the date in different order.
10.4 Time Zones
A time zone is a region of the world that uses the same standard time.
JavaScript Date objects often use the user’s local timezone when displaying dates.
The same moment can look different in Toronto, London, Dubai, or Tokyo.
This is very important for travel apps, online classes, meetings, and booking systems.
JavaScript can format dates for different time zones using Intl.DateTimeFormat.
Beginners should be careful because timezone differences can change the displayed hour or even the day.
Example: Show Toronto time
// Create the current date and time.
let now = new Date();
// Format the time for Toronto.
let torontoTime = new Intl.DateTimeFormat("en-CA", {
timeZone: "America/Toronto",
dateStyle: "full",
timeStyle: "short"
}).format(now);
// Print the formatted time.
console.log(torontoTime);
// Output:
// Current date and time in Toronto format
Code Explanation:
Intl.DateTimeFormat formats dates for a specific location.
timeZone: "America/Toronto" tells JavaScript to display Toronto time.
The exact output changes depending on when the code runs.
10.5 Timestamps
A timestamp is a number that represents a specific moment in time.
In JavaScript, timestamps usually count milliseconds since January 1, 1970.
Timestamps are useful because numbers are easy to compare and store.
Many databases, logs, APIs, and apps use timestamps.
A timestamp can help you know when something happened.
Beginners often use Date.now() to get the current timestamp.
Example: Get timestamp
// Date.now() gives the current timestamp in milliseconds.
let timestamp = Date.now();
// Print the timestamp.
console.log(timestamp);
// Output:
// A large number like 1782144000000
Code Explanation:
The output is a large number because it counts milliseconds.
Since time keeps moving, this number changes every time you run the code.
Timestamps are very useful for saving exact moments.
10.6 Calculations
Date calculations mean finding the difference between dates or adding time to a date.
JavaScript dates can be converted to timestamps, which makes math easier.
You can calculate days between two dates, add days, or check how much time is left.
This is useful for countdowns, subscriptions, deadlines, reminders, and schedules.
Beginners should remember that one day has 24 hours, one hour has 60 minutes, and one minute has 60 seconds.
In milliseconds, one day is 1000 * 60 * 60 * 24.
Example: Days between two dates
// Create the first date.
let startDate = new Date("2026-06-01");
// Create the second date.
let endDate = new Date("2026-06-10");
// Subtract dates to get milliseconds.
let difference = endDate - startDate;
// Convert milliseconds to days.
let days = difference / (1000 * 60 * 60 * 24);
// Print the number of days.
console.log(days);
// Output:
// 9
Code Explanation:
Subtracting dates gives the difference in milliseconds.
Dividing by the number of milliseconds in one day converts it to days.
June 1 to June 10 is 9 days apart.
10.7 Comparison
Date comparison means checking which date comes before or after another date.
JavaScript can compare Date objects using operators like > and <.
This works because dates can be converted into timestamp numbers.
Date comparison is useful for deadlines, expired coupons, appointments, and booking systems.
For example, you can check if a due date has passed.
Beginners should compare Date objects instead of comparing date strings manually.
Example: Compare two dates
// Create two dates.
let today = new Date("2026-06-22");
let dueDate = new Date("2026-06-30");
// Check if the due date is after today.
console.log(dueDate > today);
// Output:
// true
Code Explanation:
June 30, 2026 is after June 22, 2026.
Because the due date is later, the comparison returns true.
This kind of logic is useful in bill trackers and task apps.
10.8 Localization
Localization means showing dates in a format that matches the user’s language or country.
Different countries write dates differently.
For example, Canada, the United States, France, and Iran may display dates in different styles.
JavaScript supports localization with toLocaleDateString().
This helps your website feel natural for different users.
Beginners should use localization when building websites for international visitors.
Example: Format date for different countries
// Create a date.
let date = new Date("2026-06-22");
// Format for Canada English.
console.log(date.toLocaleDateString("en-CA"));
// Format for France.
console.log(date.toLocaleDateString("fr-FR"));
// Output:
// 2026-06-22
// 22/06/2026
Code Explanation:
en-CA formats the date for Canadian English.
fr-FR formats the date for French users in France.
Localization changes display format, not the actual saved date.
10.9 Scheduling
Scheduling means planning something to happen at a future time.
JavaScript can help compare current time with a scheduled time.
It can also use timers like setTimeout() for simple delays.
Scheduling is useful for reminders, notifications, quizzes, countdowns, and appointments.
For real apps, scheduling is often combined with databases and server code.
Beginners can start by checking whether a scheduled date is in the future.
Example: Check future event
// Current date.
let now = new Date("2026-06-22");
// Scheduled event date.
let eventDate = new Date("2026-07-01");
// Check if the event is in the future.
if (eventDate > now) {
console.log("The event is coming soon.");
} else {
console.log("The event already passed.");
}
// Output:
// The event is coming soon.
Code Explanation:
The code compares the event date with the current date.
Since July 1, 2026 is after June 22, 2026, the event is in the future.
The first message is printed.
10.10 Best Practices
Date and time can become confusing because of formats, time zones, and daylight saving time.
A good practice is to store dates in a clear and consistent format.
For many projects, ISO format like YYYY-MM-DD or full ISO strings are easier to manage.
Use localization only when displaying dates to users.
Use timestamps when you need easy comparison or exact time records.
Beginners should avoid manually building complex date logic when built-in methods can help.
Example: Store clear date and display locally
// Store the date in a clear ISO format.
let savedDate = "2026-06-22";
// Convert it into a Date object.
let date = new Date(savedDate);
// Display it for the user.
console.log(date.toLocaleDateString("en-CA"));
// Output:
// 2026-06-22
Code Explanation:
The saved date uses a clean ISO-style format.
JavaScript converts it into a Date object.
Then toLocaleDateString() displays it in a user-friendly way.
Chapter 10 Summary
- The Date object stores date and time information.
new Date() creates the current date and time.- Formatting makes dates easier for users to read.
- Time zones affect how the same moment appears in different places.
- Timestamps store exact moments as numbers.
- Date calculations are useful for deadlines and countdowns.
- Date comparisons help check past and future dates.
- Localization displays dates for different countries and languages.
- Scheduling checks and plans future events.
- Best practices help avoid date and time mistakes.
