I recently got a particular requirement from one of the clients. The client wanted to convert a date to a string format DD/MM/YYYY in TypeScript. In this tutorial, I will explain how to convert a date to a string in the DD/MM/YYYY format using TypeScript with some examples.
Different regions use different date formats. For example, the US commonly uses MM/DD/YYYY, while many European countries use DD/MM/YYYY.
TypeScript, being a superset of JavaScript, inherits its date handling features. The Date object in TypeScript is used to work with dates and times. However, formatting dates to a specific string format, such as DD/MM/YYYY, requires some additional steps.
Create and Format Dates in TypeScript
Let’s create a date object and then format it to the desired string format in TypeScript.
Create a Date Object
In TypeScript, you can create a date object using the Date constructor. Here’s an example:
let date = new Date(2025, 10, 14); // November 14, 2025 (Months are zero-indexed)
console.log(date); // Outputs: Fri Nov 14 2025 00:00:00 GMT-0500 (Eastern Standard Time)
Format Date to DD/MM/YYYY
To format the date to DD/MM/YYYY in TypeScript, we need to extract the day, month, and year from the date object and then concatenate them into the desired format.
Here is the step by step guide.
- Extract Day, Month, and Year: Use the
getDate(),getMonth(), andgetFullYear()methods to extract the respective components. - Format Components: Ensure that day and month are two digits by padding with leading zeros if necessary.
- Concatenate Components: Combine the components into a single string in the DD/MM/YYYY format.
Here’s how you can do it:
function formatDateToDDMMYYYY(date: Date): string {
let day = date.getDate().toString().padStart(2, '0');
let month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-indexed
let year = date.getFullYear().toString();
return `${day}/${month}/${year}`;
}
let date = new Date(2025, 10, 14); // November 14, 2025
console.log(formatDateToDDMMYYYY(date)); // Outputs: 14/11/2025
Output:
14/11/2025
tsc and run with node: November 14, 2025 becomes 14/11/2025.Using DatePipe in Angular
If you are working with Angular, you can leverage the DatePipe for date formatting. Import DatePipe and use it to format the date.
import { DatePipe } from '@angular/common';
let datePipe = new DatePipe('en-US');
let formattedDate = datePipe.transform(new Date(2024, 10, 14), 'dd/MM/yyyy');
console.log(formattedDate); // Outputs: 14/11/2024
Handle Special Cases
Leading Zeros
As seen in the example, using padStart(2, '0') ensures that single-digit days and months are padded with a leading zero. This is crucial for maintaining the DD/MM/YYYY format.
Invalid Dates
Always validate the date object before formatting. Ensure it’s a valid date to avoid runtime errors.
function isValidDate(date: Date): boolean {
return !isNaN(date.getTime());
}
let invalidDate = new Date('invalid date string');
console.log(isValidDate(invalidDate)); // Outputs: false
Read How to Convert String to Date in TypeScript?
Real Example: Schedule Appointments
Consider a scheduling application for a New York-based clinic. Patients book appointments, and the dates need to be displayed in DD/MM/YYYY format for clarity.
Example Code
class Appointment {
patientName: string;
appointmentDate: Date;
constructor(patientName: string, appointmentDate: Date) {
this.patientName = patientName;
this.appointmentDate = appointmentDate;
}
getFormattedDate(): string {
return formatDateToDDMMYYYY(this.appointmentDate);
}
}
let appointment = new Appointment('John Doe', new Date(2025, 10, 14));
console.log(`${appointment.patientName} has an appointment on ${appointment.getFormattedDate()}`);
// Outputs: John Doe has an appointment on 14/11/2025
This example uses the formatDateToDDMMYYYY() function from above; with both in one file, the output is:
Output:
John Doe has an appointment on 14/11/2025
Conclusion
In this tutorial, I explained how to convert dates to the DD/MM/YYYY format in TypeScript with examples.
You may also like:
- How to Convert String to Number in TypeScript?
- How to Convert Date to String in TypeScript?
- How to Check if a String is a Number in TypeScript?
Bijay Kumar is a 13-time Microsoft MVP with more than 18 years in software development, and the founder of Python Guides and TSinfo Technologies. He started out building .NET and SharePoint solutions at HP, TCS and KPIT before moving into Python, machine learning and AI, and he also builds web apps with TypeScript and React. He writes the tutorials here himself, and every example is run before publishing so you see the real output. More about Bijay · Microsoft MVP profile · LinkedIn