How to Get the Month and Day in a 2-Digit Format in JavaScript
A very common requirement when displaying or logging dates is to format the month and day numbers as two digits, with a leading zero for single-digit values (e.g., 01, 05, 12). This ensures consistent string length, which is crucial for sorting and alignment.
This guide will teach you the modern and most robust method for this task using the Intl.DateTimeFormat API. We will also cover the classic manual approach using padStart() so you can understand the underlying logic.
The Core Problem: Inconsistent String Length
When you get the month or day from a Date object, they are returned as numbers. This can lead to inconsistent string lengths.
const date1 = new Date('2025-03-05'); // March 5th
const date2 = new Date('2025-12-15'); // December 15th
const month1 = date1.getMonth() + 1; // getMonth() is 0-based, so we add 1
const day1 = date1.getDate();
console.log(`${month1}/${day1}`); // Output: "3/5"
const month2 = date2.getMonth() + 1;
const day2 = date2.getDate();
console.log(`${month2}/${day2}`); // Output: "12/15"
The inconsistent lengths (3/5 vs. 12/15) are not ideal for display or for creating sortable filenames.
The Modern Method (Recommended): Intl.DateTimeFormat
The Intl (Internationalization) API is the standard, built-in tool for all locale-sensitive number and date formatting. It has a specific option for ensuring a 2-digit format.
Solution: by using the { month: '2-digit', day: '2-digit' } options, you can easily get the desired format.
const date = new Date('2025-07-01');
// Create a formatter with the '2-digit' option for month and day.
const formatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
const formattedDate = formatter.format(date);
console.log(formattedDate);
// You can also get the parts individually
const parts = formatter.formatToParts(date);
console.log(parts);
Output:
07/01/2025
[
{
"type": "month",
"value": "07"
},
{
"type": "literal",
"value": "/"
},
{
"type": "day",
"value": "01"
},
{
"type": "literal",
"value": "/"
},
{
"type": "year",
"value": "2025"
}
]
This is the recommended best practice because it is powerful, flexible, and handles different locales and formats correctly.
The Manual Method: .padStart()
If you need a quick and simple solution without the Intl API, you can build the formatted string manually. The String.prototype.padStart() method is the key to adding the leading zero.
The logic:
- Get the month or day number from the
Dateobject. - Convert the number to a string.
- Call
.padStart(2, '0')on the string. This will add a0to the beginning of the string only if its length is less than 2.
Solution:
function getFormattedDateParts(date) {
// getMonth() is 0-based, so add 1
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const year = date.getFullYear();
return { month, day, year };
}
// Example Usage:
const date = new Date('2025-07-01');
const { month, day, year } = getFormattedDateParts(date);
console.log(`Month: ${month}`); // Output: Month: 07
console.log(`Day: ${day}`); // Output: Day: 01
console.log(`${year}-${month}-${day}`); // Output: 2025-07-01
This method is effective for simple, fixed-format requirements but lacks the flexibility of the Intl API.
Why the Intl API is the Best Practice
While the manual padStart() method works well for a single format, the Intl.DateTimeFormat API is superior for several reasons:
- Locale-Aware: It can automatically handle different date formats for different regions (e.g.,
MM/DD/YYYYin the US vs.DD/MM/YYYYin the UK) just by changing the locale string. - More Powerful: It can format many other parts of a date, such as the full month name (
'long'), weekday, and timezone. - No Manual Logic: You don't have to remember that
getMonth()is zero-based or manually handle padding.
Conclusion
For formatting month and day numbers to a 2-digit format, modern JavaScript provides excellent tools.
- The
Intl.DateTimeFormatAPI with the{ month: '2-digit', day: '2-digit' }options is the recommended best practice. It is the most powerful, flexible, and correct solution for any user-facing application. - The manual
padStart()method is a functional and straightforward alternative for simple, fixed-format needs, such as generating aYYYY-MM-DDstring for a database.