How to Get the Current Date in JavaScript: A Complete Guide for Beginners

How to Get the Current Date in JavaScript: Breaking Down a Popular Stack Overflow Question

If you are just starting your journey in web development, sooner or later you will face the task: displaying the current date on a page. It seems simple, right? But, as Stack Overflow statistics show, the question "How do I get the current date in JavaScript?" gets thousands of views every month. Why? Because behind this simple phrasing lies a whole layer of nuances: from output formats to working with time zones.

In this article, we won't just give you ready-made code. We will break it down piece by piece, learn how to manage formats, and avoid the typical pitfalls that beginners stumble into. Let's go!

Meet the Date Object — Your Main Tool

JavaScript doesn't have a special "show today" command. Instead, the language offers a powerful, but sometimes tricky, Date object. To get the current moment in time, simply create a new instance without arguments:

const now = new Date();console.log(now); // Output: Tue Oct 15 2024 14:30:00 GMT+0300

It's that simple! But let's look at what we actually got. In the console, you'll see something like Tue Oct 15 2024 14:30:00 GMT+0300. This is a human-readable format, but it's not always suitable for real-world tasks. Imagine you are building an online store and want to show the order date as "15.10.2024" — that "native" output won't work.

The thing is, the Date object stores milliseconds elapsed since January 1, 1970 (Unix epoch). What we see in the console is the result of an implicit conversion to a string. To gain control over the format, you need to use the object's methods.

Methods for Extracting Date Components

Imagine the date is a pizza that needs to be sliced into pieces: year, month, day, hours, minutes, seconds. The Date object has special "knives" — methods for each piece.

Here are the most popular ones:

• getFullYear() — returns the year (e.g., 2024).
• getMonth() — returns the month from 0 to 11. Caution: January is 0, December is 11. This is a common trap!
• getDate() — returns the day of the month (1-31).
• getDay() — returns the day of the week from 0 (Sunday) to 6 (Saturday).
• getHours(), getMinutes(), getSeconds() — obviously, hours, minutes, seconds.

Let's assemble our own date from them:

const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1; // +1 because January = 0const day = now.getDate();const hours = now.getHours();const minutes = now.getMinutes();

console.log(`${day}.${month}.${year} ${hours}:${minutes}`);// Output: "15.10.2024 14:30"

Notice: we added +1 to the month. This is a classic beginner mistake — forgetting about zero-based numbering. Remember once and for all: getMonth() returns 0 for January.

Beautiful Output: Formatting the Date

Manually building a string is good for understanding, but there are more elegant ways. JavaScript offers several built-in methods for formatting:

1. toLocaleDateString() — for localized output

This method adapts to regional settings. Want it in Russian? No problem:

const now = new Date();console.log(now.toLocaleDateString('ru-RU')); // "15.10.2024"console.log(now.toLocaleDateString('en-US')); // "10/15/2024"console.log(now.toLocaleDateString('de-DE')); // "15.10.2024"

You can even customize the format to your needs by passing an options object:

const options = {  year: 'numeric',  month: 'long',  day: 'numeric',  weekday: 'long'};console.log(now.toLocaleDate