Skip to main content

How to Format Date Components to a Two-Digit Format (getMinutes, getHours, getSeconds) in JavaScript

When working with dates in JavaScript, methods like getMinutes(), getHours(), and getSeconds() return a number. For single-digit values (0-9), this can lead to inconsistent formatting in timestamps like 14:5:3 instead of the more standard 14:05:03. To ensure a consistent, two-digit format, you need to "pad" single-digit numbers with a leading zero.

This guide will teach you the modern, standard method for this task using the String.padStart() method. You will learn how to create a simple, reusable function to perform this padding and then see how to apply it to getMinutes(), getHours(), and getSeconds() to create a properly formatted time string.

Core Task: Zero-Padding a Number​

The fundamental problem is the same for minutes, hours, and seconds: how do you take a number and ensure it is represented as a two-character string?

  • If the number is 5, it should become "05".
  • If the number is 15, it should remain "15".

The String.padStart() method is the perfect tool for this. It pads the start of a string with another string until it reaches a desired length.

The logic:

  1. Convert the number to a string.
  2. Call .padStart(targetLength, padString) on the string.

To create a reusable function for this:

function padTo2Digits(num) {
  return String(num).padStart(2, '0');
}

This single function can now be used for any number we need to format.

Applying the Solution to Date Components​

Now that we have our padTo2Digits helper function, applying it is simple.

Formatting getMinutes()​

function padTo2Digits(num) {
  return String(num).padStart(2, '0');
}

const date = new Date('October 15, 2025 05:04:00');

const minutes = padTo2Digits(date.getMinutes());
console.log(minutes); // Output: 04

Formatting getHours()​

function padTo2Digits(num) {
  return String(num).padStart(2, '0');
}

const date = new Date('October 15, 2025 05:04:00');

const hours = padTo2Digits(date.getHours());
console.log(hours); // Output: 05

Formatting getSeconds()​

function padTo2Digits(num) {
  return String(num).padStart(2, '0');
}

const date = new Date('October 15, 2025 05:04:07');

const seconds = padTo2Digits(date.getSeconds());
console.log(seconds); // Output: 07

Putting It All Together: Creating a HH:MM:SS Timestamp​

By combining these formatted components, you can easily build a standard time string.

function padTo2Digits(num) {
  return String(num).padStart(2, '0');
}

function formatTime(date) {
  const hours = padTo2Digits(date.getHours());
  const minutes = padTo2Digits(date.getMinutes());
  const seconds = padTo2Digits(date.getSeconds());
  
  return `${hours}:${minutes}:${seconds}`;
}

const myDate = new Date('2025-10-27T08:05:02');
const formattedTime = formatTime(myDate);

console.log(formattedTime); // Output: 08:05:02

Alternative (Older) Methods​

Before padStart() was common, developers used other tricks. While they work, they are generally less readable than padStart().

The slice(-2) Trick​

This method involves adding a "0" to the front of every number and then taking the last two characters of the resulting string.

function padWithSlice(num) {
  return ('0' + num).slice(-2);
}

console.log(padWithSlice(5));  // '05'.slice(-2) -> "05"
console.log(padWithSlice(15)); // '015'.slice(-2) -> "15"

The Ternary Operator Trick​

This method checks if the number is less than 10 and adds a "0" if it is.

function padWithTernary(num) {
  return num < 10 ? '0' + num : num;
}

Conclusion​

Formatting numbers from date methods to a fixed, two-digit width is essential for creating clean, standardized timestamps.

The key takeaways are:

  1. Create a reusable helper function to handle the padding logic. This keeps your code clean and dry.
  2. The String.padStart(2, '0') method is the modern, recommended best practice for this task due to its clarity and directness.
  3. Apply this function to the output of getHours(), getMinutes(), and getSeconds() to build consistently formatted time strings like HH:MM:SS.

Table of Contents