Clue Mediator

Comprehensive Guide to JavaScript Date Methods

📅December 28, 2024
🗁JavaScript

Introduction

Working with dates in JavaScript can seem overwhelming at first, but the Date object provides a wealth of built-in methods to make it much easier. From fetching specific parts of a date to formatting and manipulating them, these methods are essential for building modern web applications.

Getting Date Components

  1. getDate()
  2. getDay()
  3. getFullYear()
  4. getMonth()

Getting Time Components

  1. getHours()
  2. getMinutes()
  3. getSeconds()
  4. getMilliseconds()
  5. getTime()
  6. getTimezoneOffset()

Working with UTC

  1. getUTCDate()
  2. getUTCDay()
  3. getUTCFullYear()
  4. getUTCHours()
  5. getUTCMilliseconds()
  6. getUTCMinutes()
  7. getUTCMonth()
  8. getUTCSeconds()

Setting Dates and Times

  1. setDate()
  2. setFullYear()
  3. setMonth()
  4. setHours()
  5. setMinutes()
  6. setSeconds()
  7. setMilliseconds()
  8. setTime()

Parsing and Formatting Dates

  1. parse()
  2. toDateString()
  3. toISOString()
  4. toJSON()
  5. toLocaleDateString()
  6. toLocaleTimeString()
  7. toLocaleString()
  8. toString()
  9. toTimeString()
  10. toUTCString()

Utility Methods

  1. UTC()
  2. valueOf()

Let’s explore every method step-by-step with clear explanations and examples.

Getting Date Components

1. getDate()

The getDate() method retrieves the day of the month (1–31) for the specified Date object.

const date = new Date("2024-12-28");
console.log(date.getDate()); // Outputs: 28

2. getDay()

The getDay() method returns the day of the week (0 for Sunday, 1 for Monday, etc.) for the given Date object.

const date = new Date("2024-12-28");
console.log(date.getDay()); // Outputs: 6 (Saturday)

3. getFullYear()

The getFullYear() method retrieves the full year (e.g., 2024) for the given Date object.

const date = new Date("2024-12-28");
console.log(date.getFullYear()); // Outputs: 2024

4. getMonth()

The getMonth() method returns the zero-based month index (0 for January, 11 for December) for the specified Date object.

const date = new Date("2024-12-28");
console.log(date.getMonth()); // Outputs: 11 (December)

Getting Time Components

5. getHours()

The getHours() method retrieves the hour (0–23) for the given Date object.

const date = new Date("2024-12-28T15:30:00");
console.log(date.getHours()); // Outputs: 15

6. getMinutes()

The getMinutes() method retrieves the minutes (0–59) for the given Date object.

const date = new Date("2024-12-28T15:30:00");
console.log(date.getMinutes()); // Outputs: 30

7. getSeconds()

The getSeconds() method retrieves the seconds (0–59) for the specified Date object.

const date = new Date("2024-12-28T15:30:45");
console.log(date.getSeconds()); // Outputs: 45

8. getMilliseconds()

The getMilliseconds() method retrieves the milliseconds (0–999) for the specified Date object.

const date = new Date("2024-12-28T15:30:45.500");
console.log(date.getMilliseconds()); // Outputs: 500

9. getTime()

The getTime() method retrieves the time value (in milliseconds since January 1, 1970) for the specified Date object.

const date = new Date("2024-12-28");
console.log(date.getTime()); // Outputs: 1735324800000

10. getTimezoneOffset()

The getTimezoneOffset() method retrieves the difference, in minutes, between UTC and local time for the specified Date object.

const date = new Date();
console.log(date.getTimezoneOffset()); // Outputs: depends on your timezone

Working with UTC

11. getUTCDate()

The getUTCDate() method retrieves the day of the month in UTC (1–31) for the given Date object.

const date = new Date("2024-12-28T15:30:00Z");
console.log(date.getUTCDate()); // Outputs: 28

12. getUTCDay()

The getUTCDay() method retrieves the day of the week in UTC (0 for Sunday, 6 for Saturday) for the given Date object.

const date = new Date("2024-12-28T15:30:00Z");
console.log(date.getUTCDay()); // Outputs: 6

13. getUTCFullYear()

The getUTCFullYear() method retrieves the full year in UTC for the specified Date object.

const date = new Date("2024-12-28T15:30:00Z");
console.log(date.getUTCFullYear()); // Outputs: 2024

14. getUTCHours()

The getUTCHours() method retrieves the hour (0–23) in UTC for the given Date object.

const date = new Date("2024-12-28T15:30:00Z");
console.log(date.getUTCHours()); // Outputs: 15

15. getUTCMilliseconds()

The getUTCMilliseconds() method retrieves the milliseconds (0–999) in UTC for the given Date object.

const date = new Date("2024-12-28T15:30:00.250Z");
console.log(date.getUTCMilliseconds()); // Outputs: 250

16. getUTCMinutes()

The getUTCMinutes() method retrieves the minutes (0–59) in UTC for the given Date object.

const date = new Date("2024-12-28T15:30:00Z");
console.log(date.getUTCMinutes()); // Outputs: 30

17. getUTCMonth()

The getUTCMonth() method retrieves the zero-based month index (0–11) in UTC for the specified Date object.

const date = new Date("2024-12-28T15:30:00Z");
console.log(date.getUTCMonth()); // Outputs: 11

18. getUTCSeconds()

The getUTCSeconds() method retrieves the seconds (0–59) in UTC for the specified Date object.

const date = new Date("2024-12-28T15:30:45Z");
console.log(date.getUTCSeconds()); // Outputs: 45

Setting Dates and Times

19. setDate()

The setDate() method sets the day of the month for a Date object.

const date = new Date("2024-12-28");
date.setDate(15);
console.log(date); // Outputs: "2024-12-15T00:00:00.000Z"

20. setFullYear()

The setFullYear() method sets the full year for a Date object. You can also specify the month and day as additional arguments.

const date = new Date("2024-12-28");
date.setFullYear(2025);
console.log(date); // Outputs: "2025-12-28T00:00:00.000Z"

21. setMonth()

The setMonth() method sets the month (0–11) for the Date object. January is 0, December is 11.

const date = new Date("2024-12-28");
date.setMonth(5); // Sets to June (month index 5)
console.log(date); // Outputs: "2024-06-28T00:00:00.000Z"

22. setHours()

The setHours() method sets the hour (0–23) for the Date object. You can also specify minutes, seconds, and milliseconds as additional arguments.

const date = new Date("2024-12-28T15:30:00");
date.setHours(10, 45, 0);
console.log(date); // Outputs: "2024-12-28T10:45:00.000Z"

23. setMinutes()

The setMinutes() method sets the minutes (0–59) for the Date object. You can also specify seconds and milliseconds as additional arguments.

const date = new Date("2024-12-28T15:30:00");
date.setMinutes(10, 45);
console.log(date); // Outputs: "2024-12-28T15:10:45.000Z"

24. setSeconds()

The setSeconds() method sets the seconds (0–59) for the Date object. You can also specify milliseconds as an additional argument.

const date = new Date("2024-12-28T15:30:00");
date.setSeconds(25);
console.log(date); // Outputs: "2024-12-28T15:30:25.000Z"

25. setMilliseconds()

The setMilliseconds() method sets the milliseconds (0–999) for the Date object.

const date = new Date("2024-12-28T15:30:00.500");
date.setMilliseconds(750);
console.log(date); // Outputs: "2024-12-28T15:30:00.750Z"

26. setTime()

The setTime() method sets the Date object to the specified time (in milliseconds since January 1, 1970).

const date = new Date("2024-12-28");
date.setTime(1735324800000);
console.log(date); // Outputs: "2024-12-28T00:00:00.000Z"

Parsing and Formatting Dates

27. parse()

The parse() method parses a string representation of a date and returns the corresponding time in milliseconds.

const dateString = "2024-12-28T15:30:00";
console.log(Date.parse(dateString)); // Outputs: 1735324800000

28. toDateString()

The toDateString() method returns a human-readable string representing the date portion of the Date object.

const date = new Date("2024-12-28");
console.log(date.toDateString()); // Outputs: "Sat Dec 28 2024"

29. toISOString()

The toISOString() method returns the date in ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sssZ).

const date = new Date("2024-12-28");
console.log(date.toISOString()); // Outputs: "2024-12-28T00:00:00.000Z"

30. toJSON()

The toJSON() method returns a string in ISO format suitable for serialization. It’s similar to toISOString().

const date = new Date("2024-12-28");
console.log(date.toJSON()); // Outputs: "2024-12-28T00:00:00.000Z"

31. toLocaleDateString()

The toLocaleDateString() method returns a string representing the date portion of the Date object, formatted according to local conventions.

const date = new Date("2024-12-28");
console.log(date.toLocaleDateString()); // Outputs: depending on your locale (e.g., "12/28/2024")

32. toLocaleTimeString()

The toLocaleTimeString() method returns a string representing the time portion of the Date object, formatted according to local conventions.

const date = new Date("2024-12-28T15:30:00");
console.log(date.toLocaleTimeString()); // Outputs: depending on your locale (e.g., "3:30:00 PM")

33. toLocaleString()

The toLocaleString() method returns a string representing the full date and time portions, formatted according to local conventions.

const date = new Date("2024-12-28T15:30:00");
console.log(date.toLocaleString()); // Outputs: depending on your locale (e.g., "12/28/2024, 3:30:00 PM")

34. toString()

The toString() method returns a string representing the entire Date object in a human-readable format.

const date = new Date("2024-12-28T15:30:00");
console.log(date.toString()); // Outputs: "Sat Dec 28 2024 15:30:00 GMT+0000 (Coordinated Universal Time)"

35. toTimeString()

The toTimeString() method returns a string representing only the time portion of the Date object.

const date = new Date("2024-12-28T15:30:00");
console.log(date.toTimeString()); // Outputs: "15:30:00 GMT+0000 (Coordinated Universal Time)"

36. toUTCString()

The toUTCString() method returns a string representing the Date object in UTC format.

const date = new Date("2024-12-28T15:30:00");
console.log(date.toUTCString()); // Outputs: "Sat, 28 Dec 2024 15:30:00 GMT"

Utility Methods

37. UTC()

The UTC() method returns the time value in milliseconds for a given set of date and time parameters, treating the values as UTC.

console.log(Date.UTC(2024, 11, 28, 15, 30)); // Outputs: 1735324800000

38. valueOf()

The valueOf() method returns the primitive value of a Date object, which is the number of milliseconds since January 1, 1970.

const date = new Date("2024-12-28");
console.log(date.valueOf()); // Outputs: 1735324800000

Conclusion

With JavaScript's Date methods, you can handle every aspect of date and time manipulation, making it an indispensable tool for web developers. By learning and applying these methods, you’ll have a solid foundation to tackle any date-related task in your projects.

"Dates may seem complex, but with JavaScript's Date methods, every tick of the clock is a chance to simplify your code. Keep learning, keep coding!"

DateTime

Categories

Tags

React ExampleReact HooksReact PackageArrayStringReact AdvancedDateTimeAPISetupImagejQueryProgrammingFile or DirectoryTableWeb DevelopmentReact BeginnerRegular ExpressionErrorPickerURL