Home 〉 Javascript Tutorials 〉 JavaScript Date and Date Methods: Compvare Guide with Examples

JavaScript Date and Date Methods: Compvare Guide with Examples !

JavaScript Date and Date Methods: Compvare Guide with Examples !

Summary

How can you effectively work with dates in JavaScript? Understanding JavaScript's Date object and its methods is crucial for handling date and time operations in web development. This tutorial provides an in-depth look at creating, manipulating, and formatting dates using JavaScript. We'll explore various methods, including getting and setting date components, formatting dates in different styles, and handling time zones. By the end, you'll have a solid grasp of managing dates in JavaScript.

Introduction

JavaScript's Date object is a built-in object that allows developers to work with dates and times. It provides methods to create, manipulate, and format dates, making it essential for tasks like displaying current dates, calculating time intervals, or scheduling events.

Creating a Date Object

You can create a new Date object using the new Date() constructor. Here are some common ways:

Example 📄

// Current date and time
var currentDate = new Date();

// Specific date: January 1, 2025
var specificDate = new Date(2025, 0, 1); // Months are 0-indexed

// From a date string
var dateFromString = new Date("2025-01-01");

Syntax

The general syntax for creating a Date object is:

html syntax ✍

new Date();
new Date(milliseconds);
new Date(dateString);
new Date(year, month, day, hours, minutes, seconds, milliseconds);

Example: Display Current Date

var's display the current date in the format "DD/MM/YYYY":

Code : 1 📝

<!DOCTYPE html>
<html>
<body>

<p id="js-date"></p>
<script>
var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1; // Months are zero-based
var year = today.getFullYear();
document.getElementById('js-date').innerHTML = `${day}/${month}/${year}`;
</script>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This will output something like "31/5/2025".

Common Date Methods

Get Methods

  • getDate(): Returns the day of the month (1-31).
  • getDay(): Returns the day of the week (0-6).
  • getFullYear(): Returns the four-digit year.
  • getMonth(): Returns the month (0-11).
  • getHours(): Returns the hour (0-23).
  • getMinutes(): Returns the minutes (0-59).
  • getSeconds(): Returns the seconds (0-59).
  • getMilliseconds(): Returns the milliseconds (0-999).
  • getTime(): Returns the milliseconds since January 1, 1970.

Set Methods

  • setDate(): Sets the day of the month.
  • setFullYear(): Sets the full year.
  • setMonth(): Sets the month (0-11).
  • setHours(): Sets the hour (0-23).
  • setMinutes(): Sets the minutes (0-59).
  • setSeconds(): Sets the seconds (0-59).
  • setMilliseconds(): Sets the milliseconds (0-999).
  • setTime(): Sets the time in milliseconds since January 1, 1970.

Formatting Dates in Indian Styles

Format: DD/MM/YYYY

Code : 2 📝

<!DOCTYPE html>
<html>
<body>

<p id="js-date1"></p>
<script>
var today = new Date();
var day = String(today.getDate()).padStart(2, '0');
var month = String(today.getMonth() + 1).padStart(2, '0');
var year = today.getFullYear();
document.getElementById('js-date1').innerHTML = `${day}/${month}/${year}`;
</script>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This will output: "31/05/2025".

Format: DD-MMM-YYYY

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<p id="js-date2"></p>
<script>
var today = new Date();
var options = { day: '2-digit', month: 'short', year: 'numeric' };
var formattedDate = today.toLocaleDateString('en-GB', options).replace(/ /g, '-');
document.getElementById('js-date2').innerHTML = formattedDate;
</script>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This will output: "31-May-2025".

Parsing Date Strings

To convert a date string in "DD-MMM-YYYY" format to a Date object:

Code : 4 📝

<!DOCTYPE html>
<html>
<body>

<p id="js-date3"></p>
<script>
var dateString = "31-May-2025";
var dateParts = dateString.split("-");
var day = parseInt(dateParts[0], 10);
var month = new Date(`${dateParts[1]} 1, 2000`).getMonth(); // Get month index
var year = parseInt(dateParts[2], 10);

var parsedDate = new Date(year, month, day);
document.getElementById('js-date3).innerHTML = parsedDate;
</script>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This will output: "Sat May 31 2025 00:00:00 GMT+0530 (India Standard Time)".

Conclusion

Understanding JavaScript's Date object and its methods is essential for effective date and time manipulation in web applications. By mastering these methods, you can handle various date formats, perform calculations, and display dates in user-friendly formats.

Frequently Asked Questions (FAQs)

How do I get the current date in JavaScript?

Use new Date() to create a Date object representing the current date and time.

How can I format a date as "DD/MM/YYYY"?

Extract the day, month, and year using getDate(), getMonth(), and getFullYear(), then concatenate them with slashes.

How do I parse a date string in "DD-MMM-YYYY" format?

Split the string by "-", convert the month abbreviation to a month index, and create a new Date object with the extracted values.

How can I add days to a date?

Use setDate() method: date.setDate(date.getDate() + numberOfDays).

How do I compare two dates in JavaScript?

Convert both dates to timestamps using getTime() and compare the numeric values.

Previous Post Next Post