How to Get Current Date in JavaScript

Updated on May 24, 2023 by Muhammad Zeeshan

Share:

Are you looking for a solution to obtain the current date and time in JavaScript? Look no further! Whether you want to display the current date on your website, calculate time-based events, or create dynamic content, understanding how to get current date in JavaScript is essential.

In the world of web development, being able to retrieve the current date and time dynamically is a fundamental skill. JavaScript, with its versatile Date() object, equips you with the tools to effortlessly access and manipulate dates.

In this tutorial, we’ll see how to get current date in JavaScript with just a few lines of code. So, let’s begin.

How to Get Current Date in JavaScript

The Date() object is used to get the current date in JavaScript.

The following code will create a new Date() object and store it in a variable named date.

var date = new Date();

Now, below is the complete code syntax to get the current date in JavaScript:

<!-- JavaScript Code -->
<script>
    var date = new Date();
 
    document.write(date);
</script>

The document.writer() method will print the date on your webpage. The output of the above code will look like this below.

There are three things in the above output. 1) date, 2) time, and 3) timezone.

The date shown as an input is the current date of your browser or you can check it’s the same date shown in your system today. This is because JavaScript is a client-side scripting language that executes in the browser.

However, the date format might be not as you expected. But don’t worry, JavaScript gives us 17 different date methods to manipulate dates in any way. For example, we can get separate date elements in JavaScript using these date methods. Let’s see the methods to get current date in JavaScript separately.

JavaScript Date Methods

Following are the 17 different JavaScript methods for the Date() object.

We can use all these JavaScript methods to format the current date and time according to our needs. Let’s see how one by one.

Tip: If you don’t know anything about object methods then you should check this tutorial about JavaScript object methods.

JavaScript toDateString() Method

The toDateString() method converts the date into a string in a more readable form. By using this method, we can get current date in JavaScript in a more readable form. The below code will do this for you.

<script>
 
    var date = new Date();
 
    document.write(date.toDateString());
 
</script>

Code Output:

Get Current Date in JavaScript in dd/mm/yyyy format

To get current date in JavaScript in dd/mm/yyyy format, we will use the JavaScript getDate(), getMonth(), and getFullYear() methods all at the same time and concatenate them in JavaScript.

The following code syntax will display the current date in JavaScript in dd/mm/yyyy.

<script>
 
var date = new Date();
 
document.write(date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear());
 
</script>

Code Output:

Also, you can replace the slash symbols ‘/’ with any symbol you want like – hyphens or dots.

However, without concatenation by using the below syntax, you can get the single date element in JavaScript. The below code will get just the month of the current date and print it on the screen.

<script>
 
var date = new Date();
 
document.write(date.getMonth());
 
</script>

Output:

In the above, the browser is displaying the current month 4 but it’s not 4 it’s 5 at this time. And you will face this issue too. Because its index is starting from 0. So to correct this, we have to change the code as shown below.

<script>
 
var date = new Date();
 
document.write(date.getMonth()+1);
 
</script>

I simply add 1 to the getMonth() method.

After you get the current date in JavaScript, then the next thing to understand is the time. So, let’s see that.

Get Current Time in Hours, Minutes, and Seconds in JavaScript

The JavaScript methods like getHours(), getMinutes(), and getSeconds() are used to get the time in a custom format.

The following code will extract the time from the current date in JavaScript.

<body>
 
<h1 id="demo"></h1>
 
<!-- JavaScript Code -->
<script>
 
var date = new Date();
 
document.getElementById('demo').innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
 
</script>
</body>

In the above code, I use the getElementById() method to print the time in <h1> element of HTML. If you don’t know anything about this method then you can check out this tutorial about JavaScript getElementById() method.

Code Output:

In the above output, the time is bigger and bolder because we printed the time in the <h1> element of HTML.

You can also use the getMilliseconds() method to get the milliseconds of the current time.

Now, let’s see the set-related date methods.

JavaScript Set Date Methods

The set date methods are used to get a date in JavaScript of a specific day, month, or year. For example, if you want to check today’s date for the year 2013 using javascript then you will use set date methods.

The following code shows the syntax of how to use set date methods.

<script>
 
var date = new Date();
 
date.setFullYear(2013);
 
document.write(date);
 
</script>

Now, as you can see in the following image the output is showing the current date from the year 2013.

The date is based on 2013, so the day of the week is also changed. On May 22, 2013, the day was Wednesday. But today on the same date the day is Monday means the code is working perfectly. We can take advantage of this in our JavaScript programs where we want to get the specific date, day, month, or year.

The other methods also work the same way as you can see in another example below.

<script>
 
var date = new Date();
 
date.setMonth(8);
 
document.write(date);
 
</script>

Check line number three in the code above, that is the date.setMonth(8). This will set the month of the current date. And it will look like this in your browser.

You can use all other methods like setDate(), setTime, setMinutes(), and setSeconds() in the same way. Using these data methods, you can get the custom dates in JavaScript. And also by using concatenation you can adjust the format.

Conclusion

Finally! You’ve now mastered the art of how to get current date in JavaScript, and the possibilities are endless. Using the Date() object and its powerful methods, you can dynamically display the current date on your web pages. Also, you can create time-based interactions, or even build complex scheduling systems.

By harnessing the simplicity and flexibility of JavaScript, you have unlocked the ability to keep your applications up-to-date and in sync with the ever-changing flow of time. So go forth, explore, and infuse your projects with the magic of the present moment.

That’s it. Now, you know how to get current date in JavaScript. Happy Coding!

If you have questions, then just leave them in the comment section below.

Topic: JavaScript

About The Author

Muhammad Zeeshan

Hi everyone, I'm a Full Stack Web Developer and Technical Writer. I just love to share my knowledge to help others in this community. I mostly write about HTML, CSS, JS, MySQL, and PHP.