Aprenda Custom Date Formatting Patterns | Formatting and Comparing Dates

Custom date formatting is essential when you need to display dates in a way that matches user expectations, business requirements, or regional standards. While JavaScript provides some built-in formatting methods, such as toLocaleDateString() and toISOString(), these often lack the flexibility to create exactly the format you want. For instance, you might need a date string like 2024-07-15 09:30, which is not directly supported by the built-in methods. In such cases, you must extract individual components from the Date object and assemble them into your desired pattern.


              123456789101112131415
            
const date = new Date(2024, 6, 15, 9, 30); // July 15, 2024, 09:30

const year = date.getFullYear();
const month = date.getMonth() + 1; // getMonth() is zero-based
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();

const formatted = year + '-' +
                  (month < 10 ? '0' + month : month) + '-' +
                  (day < 10 ? '0' + day : day) + ' ' +
                  (hour < 10 ? '0' + hour : hour) + ':' +
                  (minute < 10 ? '0' + minute : minute);

console.log(formatted); // 2024-07-15 09:30

When building a custom date string, you must ensure that months, days, hours, and minutes always appear with two digits, even if they are less than 10. Without leading zeros, a date like July 5 would display as 2024-7-5 instead of the preferred 2024-07-05. This consistency is crucial for formats that are read by other systems or for maintaining a uniform appearance in your user interfaces.

To solve this, use a helper function to pad single-digit numbers with a leading zero. This approach keeps your formatting code clean and avoids repetitive conditional logic.


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

const date = new Date(2024, 0, 5, 8, 4); // January 5, 2024, 08:04

const formatted = date.getFullYear() + '-' +
                  padZero(date.getMonth() + 1) + '-' +
                  padZero(date.getDate()) + ' ' +
                  padZero(date.getHours()) + ':' +
                  padZero(date.getMinutes());

console.log(formatted); // 2024-01-05 08:04

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 7.14

Deslize para mostrar o menu


              123456789101112131415
            
const date = new Date(2024, 6, 15, 9, 30); // July 15, 2024, 09:30

const year = date.getFullYear();
const month = date.getMonth() + 1; // getMonth() is zero-based
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();

const formatted = year + '-' +
                  (month < 10 ? '0' + month : month) + '-' +
                  (day < 10 ? '0' + day : day) + ' ' +
                  (hour < 10 ? '0' + hour : hour) + ':' +
                  (minute < 10 ? '0' + minute : minute);

console.log(formatted); // 2024-07-15 09:30

To solve this, use a helper function to pad single-digit numbers with a leading zero. This approach keeps your formatting code clean and avoids repetitive conditional logic.


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

const date = new Date(2024, 0, 5, 8, 4); // January 5, 2024, 08:04

const formatted = date.getFullYear() + '-' +
                  padZero(date.getMonth() + 1) + '-' +
                  padZero(date.getDate()) + ' ' +
                  padZero(date.getHours()) + ':' +
                  padZero(date.getMinutes());

console.log(formatted); // 2024-01-05 08:04

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3