Home ยป JavaScript Date Set Methods: A Comprehensive Tutorial

JavaScript Date Set Methods: A Comprehensive Tutorial

JavaScript's Date object allows you to manipulate dates and times using several set methods.

These methods let you update various parts of a date, such as the year, month, day, hour, minute, second, and even milliseconds.

This tutorial will go over the different set methods available in the Date object with practical code examples.

1. Creating a Date Object

Before using the set methods, you need to have a Date object. You can create a Date object representing the current date and time or a specific date.

Example 1: Creating a Date Object

// Current date and time
const date = new Date();
console.log(date); // Output: Current date and time

// Specific date and time (Year, Month (0-based), Day, Hours, Minutes, Seconds)
const specificDate = new Date(2024, 9, 6, 14, 30, 0); // October 6, 2024, 14:30:00
console.log(specificDate); // Output: Sun Oct 06 2024 14:30:00 GMT+0000 (Coordinated Universal Time)

2. setFullYear() Method

The setFullYear() method sets the year for a Date object. You can also optionally specify the month (0-11) and day (1-31).

Example 2: Using setFullYear()

const date = new Date();
console.log(date); // Output: Current date

date.setFullYear(2025);
console.log(date); // Output: Date with the updated year (e.g., 'Sun Oct 06 2025 ...')

// Set year, month (0-based), and day
date.setFullYear(2023, 0, 15); // January 15, 2023
console.log(date); // Output: 'Sun Jan 15 2023 ...'

Explanation: The method allows you to change just the year or the year, month, and day simultaneously.

3. setMonth() Method

The setMonth() method sets the month of a Date object. It takes a zero-based index (0 for January, 11 for December) and can optionally set the day of the month.

Example 3: Using setMonth()

const date = new Date();
console.log(date); // Output: Current date

date.setMonth(11); // Setting the month to December (0-based)
console.log(date); // Output: Date with the updated month (e.g., 'Fri Dec 06 2024 ...')

// Set month and day
date.setMonth(5, 10); // Setting to June 10th
console.log(date); // Output: 'Mon Jun 10 2024 ...'

Explanation: When only the month is provided, the day of the month remains unchanged unless it's updated using the second parameter.

4. setDate() Method

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

Example 4: Using setDate()

const date = new Date();
console.log(date); // Output: Current date

date.setDate(15); // Set the day of the month to 15
console.log(date); // Output: Date with the updated day (e.g., 'Fri Oct 15 2024 ...')

// Setting the date to a higher value adjusts the month
date.setDate(32);
console.log(date); // Output: Automatically moves to the next month (e.g., 'Wed Nov 01 2024 ...')

Explanation: If the day exceeds the maximum days in the current month, it automatically adjusts to the next month.

5. setHours() Method

The setHours() method sets the hour for a Date object. It can optionally set the minutes, seconds, and milliseconds.

Example 5: Using setHours()

const date = new Date();
console.log(date); // Output: Current date and time

date.setHours(20); // Set the hour to 8 PM
console.log(date); // Output: Date with updated hour (e.g., 'Wed Oct 06 2024 20:30:00 ...')

// Set hours, minutes, seconds, and milliseconds
date.setHours(15, 45, 30, 500);
console.log(date); // Output: 'Wed Oct 06 2024 15:45:30.500 ...'

Explanation: You can set just the hour, or you can also specify minutes, seconds, and milliseconds.

6. setMinutes() Method

The setMinutes() method sets the minutes for a Date object. It can optionally set the seconds and milliseconds.

Example 6: Using setMinutes()

const date = new Date();
console.log(date); // Output: Current date and time

date.setMinutes(10); // Set minutes to 10
console.log(date); // Output: Date with updated minutes (e.g., 'Wed Oct 06 2024 14:10:00 ...')

// Set minutes, seconds, and milliseconds
date.setMinutes(30, 45, 600);
console.log(date); // Output: 'Wed Oct 06 2024 14:30:45.600 ...'

7. setSeconds() Method

The setSeconds() method sets the seconds for a Date object. It can optionally set the milliseconds.

Example 7: Using setSeconds()

const date = new Date();
console.log(date); // Output: Current date and time

date.setSeconds(45); // Set seconds to 45
console.log(date); // Output: Date with updated seconds (e.g., 'Wed Oct 06 2024 14:30:45 ...')

// Set seconds and milliseconds
date.setSeconds(20, 250);
console.log(date); // Output: 'Wed Oct 06 2024 14:30:20.250 ...'

8. setMilliseconds() Method

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

Example 8: Using setMilliseconds()

const date = new Date();
console.log(date); // Output: Current date and time

date.setMilliseconds(500); // Set milliseconds to 500
console.log(date); // Output: Date with updated milliseconds (e.g., 'Wed Oct 06 2024 14:30:45.500 ...')

9. setTime() Method

The setTime() method sets the time for a Date object in milliseconds since January 1, 1970 (the Unix epoch).

Example 9: Using setTime()

const date = new Date();
console.log(date); // Output: Current date and time

const timestamp = 1609459200000; // January 1, 2021 00:00:00 UTC in milliseconds
date.setTime(timestamp);
console.log(date); // Output: 'Fri Jan 01 2021 00:00:00 GMT+0000 (UTC)'

Explanation: This method allows you to set a date using a timestamp.

10. setUTC*() Methods

The setUTC*() methods are similar to the set*() methods but modify the date in the Coordinated Universal Time (UTC) time zone.

Example 10: Using setUTCFullYear(), setUTCMonth(), and setUTCDate()

const date = new Date();

// Set UTC year
date.setUTCFullYear(2023);
console.log(date); // Output: Date with updated UTC year

// Set UTC month and day
date.setUTCMonth(0, 15); // January 15 in UTC
console.log(date); // Output: 'Sun Jan 15 2023 ...'

// Set UTC hours, minutes, and seconds
date.setUTCHours(12, 30, 45);
console.log(date); // Output: 'Sun Jan 15 2023 12:30:45 GMT+0000 (UTC)'

Explanation: These methods allow you to set date and time components in the UTC time zone.

11. Using set Methods Together

You can combine multiple set methods to adjust various parts of a date.

Example 11: Setting Multiple Date Components

const date = new Date();
console.log(date); // Output: Current date and time

// Set year, month, day, hours, minutes, seconds, and milliseconds
date.setFullYear(2022);
date.setMonth(11); // December (0-based)
date.setDate(25);
date.setHours(10);
date.setMinutes(45);
date.setSeconds(30);
date.setMilliseconds(123);

console.log(date); // Output: 'Sun Dec 25 2022 10:45:30.123 ...'

Conclusion

The Date object's set methods provide a flexible way to manipulate dates and times in JavaScript.

Whether you need to update the year, month, day, or fine-tune the time components down to milliseconds, these methods make it easy to work with dates.

By understanding how to use these methods, you can effectively manage and manipulate

You may also like