Skip to main content

How to Get the Hours and Minutes from a Date Object in JavaScript

Extracting the time portion of a Date object—specifically the hours and minutes—is a very common formatting task. You might need to display the time of an event, log a timestamp, or create a time-based schedule. While you can get these values manually, the modern and recommended approach is to use JavaScript's built-in Internationalization (Intl) APIs.

This guide will teach you the best methods for getting a formatted HH:MM string from a Date object. We will cover the powerful and flexible toLocaleString() method and contrast it with the more manual approach of using .getHours() and .getMinutes().

The Core Problem: Formatting Time​

A JavaScript Date object contains full date and time information. Our goal is to extract just the hours and minutes and format them into a human-readable string, like "14:30" or "02:30 PM".

For example, how to get a formatted "HH:MM" string from a Date object?

The date.toLocaleString() method is the standard, built-in tool for all locale-sensitive date and time formatting. It is the best choice for this task because it is highly configurable and can adapt to different regional formatting conventions.

The logic: we call toLocaleString() with an options object that specifies we only want the hour and minute, and that they should be formatted as 2-digit numbers.

Solution:

const myDate = new Date('2025-07-01T09:05:00');

const options = {
  hour: '2-digit',
  minute: '2-digit',
};

const timeString = myDate.toLocaleString('en-US', options);

console.log(timeString); // Output: "09:05 AM"
note

This is the recommended best practice because it is declarative and handles zero-padding automatically.

How to Handle 12-hour vs. 24-hour Format​

A key advantage of toLocaleString() is its ability to easily switch between 12-hour (AM/PM) and 24-hour formats.

The solution is:

  • To force a 12-hour clock, you can add hour12: true.
  • To force a 24-hour clock, you add hour12: false. Many non-US locales like en-GB default to this.
const myDate = new Date('2023-10-27T14:30:00'); // 2:30 PM

const options = {
  hour: '2-digit',
  minute: '2-digit',
};

// US locale defaults to 12-hour clock
console.log(myDate.toLocaleString('en-US', options));
// Output: "02:30 PM"

// UK locale defaults to 24-hour clock
console.log(myDate.toLocaleString('en-GB', options));
// Output: "14:30"

// Forcing 24-hour clock on a US locale
console.log(myDate.toLocaleString('en-US', { ...options, hour12: false }));
// Output: "14:30"

The Manual Method: .getHours(), .getMinutes(), and .padStart()​

While not recommended for most cases, you can always build the formatted string yourself by extracting each component of the date.

The logic:

  1. Use .getHours() and .getMinutes() to get the numerical values.
  2. Convert each number to a string.
  3. Use String.prototype.padStart() to add a leading zero if the number is less than 10.
  4. Join the parts with a colon.

Solution:

function getHoursAndMinutes(date) {
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  
  return `${hours}:${minutes}`;
}

// Example Usage:
const myDate = new Date('2025-07-01T09:05:00');
console.log(getHoursAndMinutes(myDate)); // Output: "09:05"
note

The main drawbacks of this method are that it is more verbose and does not handle 12-hour (AM/PM) formatting or internationalization.

Conclusion​

For getting a formatted hours and minutes string from a Date object, the choice is clear.

  • The date.toLocaleString() method (which uses the Intl API) is the recommended best practice. It is the most powerful, flexible, and correct solution for any user-facing application, especially with its easy handling of 12/24-hour formats.
  • The manual method of building the string with .getHours(), .getMinutes(), and .padStart() is a functional alternative for simple, fixed-format needs where locale-awareness is not required.

Table of Contents