DEV Community

Cover image for Working with Dates and Times in JavaScript
Keshav Khatri
Keshav Khatri

Posted on

Working with Dates and Times in JavaScript

JavaScript provides robust tools for managing dates and times efficiently. In this guide, we'll explore the various functionalities and best practices for working with dates and times in JavaScript.

Understanding JavaScript's Date Object:

JavaScript provides a built-in Date object for working with dates and times. You can create a new Date object using various constructors, such as:

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

// Specific date and time
const specificDate = new Date('2024-04-22T12:00:00');

// Date components
const dateComponents = new Date(2024, 3, 22, 12, 0, 0); 
Enter fullscreen mode Exit fullscreen mode

Manipulating Dates:

Once you have a Date object, you can perform various operations such as getting and setting specific components like year, month, day, hours, minutes, seconds, and milliseconds.

// Get the year
const year = currentDate.getFullYear();

// Set the month
currentDate.setMonth(5); // June
Enter fullscreen mode Exit fullscreen mode

Formatting Dates:

Formatting dates for display is a common requirement. JavaScript doesn't have built-in methods for formatting dates, but you can achieve this using methods like toLocaleDateString() or libraries like moment.js or date-fns.

// Using toLocaleDateString
const formattedDate = currentDate.toLocaleDateString('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',

console.log(formattedDate); // Example: "Friday, April 22, 2024"
Enter fullscreen mode Exit fullscreen mode

Working with Timezones:

JavaScript's Date object operates in the local timezone by default. However, you may need to work with dates in different timezones. You can accomplish this using libraries like moment-timezone or by manually adjusting the time offset.

// Using moment-timezone
const moment = require('moment-timezone');
const utcDate = moment.utc('2024-04-22T12:00:00').tz('America/New_York');
Enter fullscreen mode Exit fullscreen mode

Handling Date Arithmetic:

Performing date arithmetic, such as adding or subtracting days, months, or years, is often necessary. JavaScript's Date object provides methods like setDate(), setMonth(), and setFullYear() for this purpose.

// Adding days
currentDate.setDate(currentDate.getDate() + 7);

// Subtracting months
currentDate.setMonth(currentDate.getMonth() - 1);

// Adding years
currentDate.setFullYear(currentDate.getFullYear() + 2);
Enter fullscreen mode Exit fullscreen mode

Working with Intervals and Durations:

Sometimes, you need to work with intervals or durations between dates. Libraries like date-fns provide functions to handle these scenarios easily.

// Calculating difference between dates
const differenceInDays = dateFns.differenceInDays(endDate, startDate);

// Adding a duration to a date
const endDate = dateFns.addDays(startDate, 7);

Enter fullscreen mode Exit fullscreen mode

Additional Date Functions and Uses:

Comparing Dates:

const date1 = new Date('2024-04-22');
const date2 = new Date('2024-04-23');

if (date1 < date2) {
  console.log('date1 is before date2');
} else {
  console.log('date1 is after date2');

Enter fullscreen mode Exit fullscreen mode

Getting Day of the Week:

const dayOfWeek = currentDate.getDay(); // Returns the day of the week (0-6)

Enter fullscreen mode Exit fullscreen mode

Calculating Age:

function calculateAge(birthDate) {
  const today = new Date();
  const diff = today - birthDate;
  const ageDate = new Date(diff);
  return Math.abs(ageDate.getUTCFullYear() - 1970);

const birthDate = new Date('1990-05-15');
const age = calculateAge(birthDate);

Enter fullscreen mode Exit fullscreen mode

By mastering these javascript date handling techniques, you can build more robust and efficient applications that meet your users' needs effectively.

Top comments (1)

kooiinc profile image

For more date handling, maybe my es-date-fiddler is useful. See the demo too.