Lære 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

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 3

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 7.14

Stryg for at vise menuen


              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

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 3