How To Convert Date To String Format DD/MM/YYYY In TypeScript?

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.

Table of Contents

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: Thu 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(), and getFullYear() 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

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

Conclusion

In this tutorial, I explained how to convert dates to the DD/MM/YYYY format in TypeScript with examples.

How to Convert Date to String Format DD/MM/YYYY in TypeScript?