Phase 7 — Dates

JavaScript Date Object

Almost every modern application works with dates and time.

Examples include:

• Login Time
• Order Date
• Chat Messages
• Calendar Applications
• Blogs
• Email Systems
• Flight Booking
• Banking Applications
• Attendance Systems
• Event Scheduling

JavaScript provides the Date object for handling dates and times.

What is the Date Object?

The Date object represents a specific moment in time.

It stores:

• Year
• Month
• Day
• Hour
• Minute
• Second
• Millisecond

Creating Current Date

javascriptCopy
1const now = new Date();
2
3console.log(now);

Example Output

textCopy
1Wed Jul 23 2026 10:45:30 GMT+0530

Creating a Specific Date

javascriptCopy
1const birthday = new Date("2003-09-18");
2
3console.log(birthday);

Creating Using Numbers

javascriptCopy
1const date = new Date(
2
3    2026,
4    6,
5    23,
6    10,
7    30,
8    0
9
10);
11
12console.log(date);

Note: Months are zero-based.

textCopy
10 → January
2
31 → February
4
5...
6
76 → July
8
911 → December

Current Date Components

javascriptCopy
1const today = new Date();
2
3console.log(today.getFullYear());
4
5console.log(today.getMonth());
6
7console.log(today.getDate());
8
9console.log(today.getDay());
10
11console.log(today.getHours());
12
13console.log(today.getMinutes());
14
15console.log(today.getSeconds());

Example Output

textCopy
12026
26
323
44
510
630
715

Useful Date Methods

Timestamp

A timestamp is the number of milliseconds since January 1, 1970 UTC.

javascriptCopy
1const timestamp = Date.now();
2
3console.log(timestamp);

Example Output

textCopy
11784789102356

Convert Timestamp to Date

javascriptCopy
1const date = new Date(Date.now());
2
3console.log(date);

Formatting Dates

toDateString()

javascriptCopy
1const today = new Date();
2
3console.log(today.toDateString());

Output

textCopy
1Thu Jul 23 2026

toTimeString()

javascriptCopy
1console.log(today.toTimeString());

Output

textCopy
110:30:45 GMT+0530

toISOString()

javascriptCopy
1console.log(today.toISOString());

Output

textCopy
12026-07-23T05:00:45.123Z

Used in APIs and databases.

toLocaleDateString()

javascriptCopy
1console.log(
2
3    today.toLocaleDateString()
4
5);

Output

textCopy
123/7/2026

toLocaleTimeString()

javascriptCopy
1console.log(
2
3    today.toLocaleTimeString()
4
5);

Timezones

Different countries have different time zones.

JavaScript automatically uses the user's local time zone.

javascriptCopy
1console.log(
2
3Intl.DateTimeFormat().resolvedOptions().timeZone
4
5);

Example Output

textCopy
1Asia/Kolkata

UTC Time

javascriptCopy
1const now = new Date();
2
3console.log(
4
5now.toUTCString()
6
7);

Output

textCopy
1Thu, 23 Jul 2026 05:00:45 GMT

Intl.DateTimeFormat

Intl.DateTimeFormat provides professional date formatting for different countries and languages.

Basic Example

javascriptCopy
1const today = new Date();
2
3const formatter = new Intl.DateTimeFormat(
4
5    "en-IN"
6
7);
8
9console.log(
10
11formatter.format(today)
12
13);

Output

textCopy
123/07/2026

US Format

javascriptCopy
1const us = new Intl.DateTimeFormat(
2
3    "en-US"
4
5);
6
7console.log(
8
9us.format(new Date())
10
11);

Output

textCopy
17/23/2026

Long Format

javascriptCopy
1const formatter = new Intl.DateTimeFormat(
2
3    "en-IN",
4
5    {
6
7        weekday:"long",
8
9        year:"numeric",
10
11        month:"long",
12
13        day:"numeric"
14
15    }
16
17);
18
19console.log(
20
21formatter.format(new Date())
22
23);

Output

textCopy
1Thursday, 23 July 2026

Currency Locale Example

javascriptCopy
1const formatter = new Intl.DateTimeFormat(
2
3    "ja-JP"
4
5);
6
7console.log(
8
9formatter.format(new Date())
10
11);

Output

textCopy
12026/7/23

Date Difference

javascriptCopy
1const start = new Date("2026-01-01");
2
3const end = new Date("2026-01-10");
4
5const difference =
6
7end - start;
8
9console.log(difference);

Output

textCopy
1777600000

Milliseconds between dates.

Days Between Dates

javascriptCopy
1const oneDay =
2
31000 * 60 * 60 * 24;
4
5const days =
6
7difference / oneDay;
8
9console.log(days);

Output

textCopy
19

Real-World Example — Digital Clock

javascriptCopy
1setInterval(() => {
2
3    const now = new Date();
4
5    console.log(
6
7        now.toLocaleTimeString()
8
9    );
10
11},1000);

Real-World Example — Greeting

javascriptCopy
1const hour =
2
3new Date().getHours();
4
5let greeting;
6
7if(hour < 12){
8
9    greeting = "Good Morning";
10
11}else if(hour < 18){
12
13    greeting = "Good Afternoon";
14
15}else{
16
17    greeting = "Good Evening";
18
19}
20
21console.log(greeting);

Mini Project — Live Date & Time

index.html

htmlCopy
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Live Clock</title>
5</head>
6<body>
7
8<h2 id="clock"></h2>
9
10<script src="script.js"></script>
11
12</body>
13</html>

script.js

javascriptCopy
1const clock = document.getElementById("clock");
2
3setInterval(() => {
4
5    const now = new Date();
6
7    clock.textContent =
8
9        now.toLocaleString();
10
11},1000);

Common Mistakes

Months Start from Zero

javascriptCopy
1new Date(2026,0,1);

January

javascriptCopy
1new Date(2026,11,25);

December

Using Local Time for APIs

Prefer

javascriptCopy
1date.toISOString();

Instead of

javascriptCopy
1date.toString();

Comparing Date Strings

Wrong

javascriptCopy
1date1 === date2

Correct

javascriptCopy
1date1.getTime() === date2.getTime()

Performance

Best Practices

• Store dates in UTC (toISOString()) when sending data to servers.
• Display dates using Intl.DateTimeFormat for localization.
• Use Date.now() for timestamps and performance measurements.
• Compare dates using timestamps (getTime()).
• Avoid manually formatting dates; rely on built-in internationalization APIs.
• Be mindful that month values are zero-based when using the numeric Date constructor.

Interview Questions

Q1. What is a JavaScript Date object?

A Date object represents a single point in time and stores the date and time with millisecond precision.

Q2. What is a timestamp?

A timestamp is the number of milliseconds elapsed since January 1, 1970 UTC.

Q3. Why should you use Intl.DateTimeFormat?

It formats dates according to locale and language, making applications suitable for international users.

Q4. Why are months zero-based in JavaScript?

When using the numeric Date constructor, months range from 0 (January) to 11 (December). This is a long-standing JavaScript design choice.

Summary

In this module, you learned:

• How to create and use the JavaScript Date object.
• How to retrieve the current date and time.
• How timestamps work and how to convert them into dates.
• Different ways to format dates and times.
• How JavaScript handles local and UTC time zones.
• How to use Intl.DateTimeFormat for locale-aware formatting.
• How to calculate date differences and build time-based features.
• Real-world examples such as digital clocks, greetings, and localized date displays.

Next Module: Phase 8 — DOM (Document Object Model), where you'll learn how JavaScript interacts with HTML elements, handles events, manipulates styles, and builds dynamic user interfaces.