JavaScript Date and Time

Almost every modern application works with dates and times.

Examples include:

• Attendance systems

• Online booking platforms

• Railway reservation systems

• Calendar applications

• Event management software

• Banking applications

Imagine creating:

• A digital clock

• A countdown timer

• An age calculator

• A reminder application

All of these require date and time functionality.

JavaScript provides a built-in Date Object that allows developers to work with dates and times easily.

In this article, we will learn:

• What the Date Object is

• Creating dates

• Current date and time

• Getting date components

• Setting date components

• Formatting dates

• Time calculations

• Digital Clock Project

• Countdown Timer

• Age Calculator

---

What is the Date Object?

The Date object is a built-in JavaScript object used to work with:

• Dates

• Times

• Timestamps

Example:

let today =
new Date();

console.log(today);

Output:

Current Date and Time

---

Why Date Object is Needed

Without Date Object:

Cannot determine:

Current Time

Current Date

Age

Days Between Dates

With Date Object:

Easy Date and Time Manipulation

---

Creating a Date Object

Syntax:

let date =
new Date();

Example:

let today =
new Date();

console.log(today);

Output:

Mon Jun 22 2026 ...

(The exact output depends on current date and time.)

---

Creating Specific Dates

Example:

let date =
new Date(
2026,
5,
22
);

Output:

June 22, 2026

---

Understanding Month Index

Months start from:

January = 0

February = 1

March = 2

...

December = 11

Example:

new Date(
2026,
0,
1
);

Represents:

January 1, 2026

---

Creating Date from String

Example:

let date =
new Date(
"2026-06-22"
);

Output:

June 22, 2026

---

Current Timestamp

Example:

let timestamp =
Date.now();

console.log(timestamp);

Output:

Milliseconds since
January 1, 1970

---

Getting Date Components

The Date object provides methods to retrieve information.

---

getFullYear()

Example:

let date =
new Date();

console.log(
date.getFullYear()
);

Output:

2026

---

getMonth()

Example:

console.log(
date.getMonth()
);

Output:

5

Represents June.

---

getDate()

Returns day of month.

Example:

console.log(
date.getDate()
);

Output:

22

---

getDay()

Returns day of week.

Example:

console.log(
date.getDay()
);

Output:

1

Meaning:

Sunday = 0

Monday = 1

Tuesday = 2

...

---

Getting Time Components

---

getHours()

console.log(
date.getHours()
);

Output:

15

(3 PM)

---

getMinutes()

console.log(
date.getMinutes()
);

Output:

45

---

getSeconds()

console.log(
date.getSeconds()
);

Output:

30

---

Date Components Overview

Method	Description
getFullYear()	Year
getMonth()	Month
getDate()	Day
getDay()	Weekday
getHours()	Hour
getMinutes()	Minutes
getSeconds()	Seconds

---

Setting Date Components

Date values can be modified.

---

setFullYear()

Example:

let date =
new Date();

date.setFullYear(
2030
);

console.log(date);

---

setMonth()

date.setMonth(
11
);

Sets month to December.

---

setDate()

date.setDate(
25
);

Sets day to 25.

---

Formatting Dates

Default output:

Mon Jun 22 2026

Sometimes custom formatting is needed.

---

Example

let date =
new Date();

let formatted =
date.getDate() +
"/" +
(date.getMonth()+1) +
"/" +
date.getFullYear();

console.log(formatted);

Output:

22/6/2026

---

Converting to String

let date =
new Date();

console.log(
date.toDateString()
);

Output:

Mon Jun 22 2026

---

Converting to Time String

console.log(
date.toTimeString()
);

Output:

15:45:30 GMT...

---

Locale Date Format

console.log(
date.toLocaleDateString()
);

Output:

22/06/2026

---

Locale Time Format

console.log(
date.toLocaleTimeString()
);

Output:

3:45:30 PM

---

Date Difference

Example:

let date1 =
new Date(
"2026-01-01"
);

let date2 =
new Date(
"2026-01-10"
);

let difference =
date2 - date1;

console.log(
difference
);

Output:

Milliseconds Difference

---

Convert Milliseconds to Days

let days =
difference /
(
1000 *
60 *
60 *
24
);

console.log(days);

Output:

9

---

Practical Project – Digital Clock

HTML:

<h1 id="clock"></h1>

JavaScript:

function updateClock()
{
    let now =
    new Date();

    document
    .getElementById(
    "clock"
    )
    .innerHTML =
    now.toLocaleTimeString();
}

setInterval(
updateClock,
1000
);

---

Output

10:30:01 AM

10:30:02 AM

10:30:03 AM

Updates every second.

---

Understanding setInterval()

Syntax:

setInterval(
function,
milliseconds
);

Example:

setInterval(
showTime,
1000
);

Runs every:

1000 ms

= 1 second

---

Practical Project – Countdown Timer

let count = 10;

let timer =
setInterval(
function()
{
    console.log(count);

    count--;

    if(count < 0)
    {
        clearInterval(
        timer
        );
    }
},
1000
);

Output:

10

9

8

...

0

---

Practical Project – Age Calculator

let birthYear =
2005;

let currentYear =
new Date()
.getFullYear();

let age =
currentYear -
birthYear;

console.log(age);

Output:

21

---

More Accurate Age Calculation

let birthDate =
new Date(
"2005-07-06"
);

let today =
new Date();

let age =
today.getFullYear()
-
birthDate.getFullYear();

console.log(age);

---

Practical Project – Greeting Based on Time

let hour =
new Date()
.getHours();

if(hour < 12)
{
    console.log(
    "Good Morning"
    );
}
else if(hour < 18)
{
    console.log(
    "Good Afternoon"
    );
}
else
{
    console.log(
    "Good Evening"
    );
}

---

Output

Depending on current time:

Good Morning

or

Good Afternoon

or

Good Evening

---

Complete Program

<!DOCTYPE html>

<html>

<body>

<h1 id="clock">

</h1>

<script>

function showTime()
{
    let now =
    new Date();

    document
    .getElementById(
    "clock"
    )
    .innerHTML =
    now.toLocaleTimeString();
}

setInterval(
showTime,
1000
);

</script>

</body>

</html>

---

Real-Life Applications

Date and Time are used in:

• Railway Reservation Systems

• Banking Applications

• Attendance Management

• Calendar Apps

• Flight Booking Systems

• Event Scheduling Platforms

Every modern application depends heavily on date and time calculations.

---

Common Mistakes Beginners Make

Forgetting Month Starts at 0

Wrong assumption:

January = 1

Correct:

January = 0

---

Using getDay Instead of getDate

Wrong:

date.getDay();

Returns weekday.

Correct:

date.getDate();

Returns day of month.

---

Forgetting Time Zone Differences

Different users may see different times based on location.

---

Best Practices

• Use Date object for all date operations.

• Use toLocaleDateString() for user-friendly dates.

• Use timestamps for calculations.

• Validate user-entered dates.

• Be aware of time zones.

---

Advantages of Date Object

• Easy date calculations

• Built-in support

• Flexible formatting

• Time tracking

• Essential for real-world applications

---

Conclusion

The JavaScript Date Object is a powerful tool for working with dates and times. It enables developers to create clocks, calendars, timers, booking systems, and scheduling applications.

Understanding date manipulation is an essential skill for modern web development.