Format Date As MM/DD/YYYY In TypeScript

While working on a TypeScript project, I needed to display dates in the American format (MM/DD/YYYY) instead of the default ISO format (YYYY-MM-DD). TypeScript’s built-in Date object and the toLocaleString() method make this easy and no external libraries required.

In this blog, I’ll show you how to format date as MM/DD/YYYY in TypeScript using toLocaleString(), handle different input formats, customize separators, and manage timezone differences.

Table of Contents

Understanding the Date Object in TypeScript

In TypeScript, the built-in Date object represents a single moment in time. It provides various methods to work with dates and times. To format a date as MM/DD/YYYY, we’ll utilize the toLocaleString() method along with the appropriate locale and options.

Let’s start with a basic example. Suppose we have a variable dateString containing a date in ISO format:

const dateString = '2025-07-4';

To create a Date object from this string, we can simply pass it to the Date constructor:

const date = new Date(dateString);
console.log(date); // Output: Fri Jul 04 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Formatting Date as MM/DD/YYYY Using toLocaleString()

The toLocaleString() method allows us to convert a date to a string representation based on the specified locale and options. To format the date as MM/DD/YYYY, we’ll use the ‘en-US’ locale and provide the desired formatting options.

Here’s an example:

const formattedDate = date.toLocaleString('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
console.log(formattedDate); // Output: 07/04/2025

Output:

Convert Date to MM-dd-yyyy format in Typescript

In this code snippet, we call the toLocaleString() method on the date object, passing the ‘en-US’ locale as the first argument. The second argument is an options object where we specify the formatting options:

year: ‘numeric’ displays the full year (e.g., 2025).
month: ‘2-digit’ displays the month as a two-digit number (e.g., 07).
day: ‘2-digit’ displays the day as a two-digit number (e.g., 04).

The resulting formattedDate variable will contain the date formatted as MM/DD/YYYY.

Check out: Set a Date Value to Null in TypeScript

Handling Different Input Formats

In some cases, you might receive dates in different formats from an API or user input. To handle these scenarios, you can use the Date.parse() method to parse the date string into a timestamp and then create a Date object from it.

For example, let’s say we have a date string in the format ‘MM/DD/YYYY’:

const dateString = '07/04/2025';
const timestamp = Date.parse(dateString);
const date = new Date(timestamp);

The Date.parse() method attempts to parse the date string and returns the corresponding timestamp. We can then pass this timestamp to the Date constructor to create a Date object.

Formatting Date with Custom Separator

If you want to use a custom separator instead of the default forward slash (/), you can modify the toLocaleString() options to include the timeZone and timeZoneName properties set to ‘UTC’ and ‘short’, respectively. This ensures that the formatted date string doesn’t include any time zone information.

Here’s an example that formats the date with a custom separator:

const formattedDate = date.toLocaleString('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  timeZone: 'UTC',
  timeZoneName: 'short'
}).replace(/\//g, '-');
console.log(formattedDate); // Output: 07-04-2025

Output:

Typescript convert date in mm-dd-yyyy format

In this code snippet, we use the replace() method with a regular expression to replace all occurrences of the forward slash (/) with a hyphen (-). You can customize the separator by replacing the hyphen with your desired character.

Check out:Calculate Yesterday’s Date in TypeScript

Handling Timezone Differences

When working with dates, it’s important to consider timezone differences, especially if your application serves users in different regions. By default, the Date object operates in the local timezone of the system where the code is executed.

To ensure consistency and avoid timezone-related issues, you can use the Date.prototype.toUTCString() method to convert the date to the UTC (Coordinated Universal Time) timezone before formatting it.

Here’s an example:

const utcDate = date.toUTCString();
const formattedDate = new Date(utcDate).toLocaleString('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
console.log(formattedDate); // Output: 07/04/2025

Output:

Convert Date format to MM-dd-yyyy in Typescript

In this code snippet, we first convert the date object to a UTC string using toUTCString(). Then, we create a new Date object from the UTC string and format it using toLocaleString() with the ‘en-US’ locale.

Real-World Example: Displaying a User’s Birthday

Let’s consider a real-world scenario where you need to display a user’s birthday in the MM/DD/YYYY format in your TypeScript application.

Suppose you have a User interface defined as follows:

interface User {
  name: string;
  email: string;
  birthday: string;
}

Here’s an example of how you can format the user’s birthday:

const user: User = {
  name: 'John Doe',
  email: 'john.doe@example.com',
  birthday: '1990-05-15'
};

const birthday = new Date(user.birthday);
const formattedBirthday = birthday.toLocaleString('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});

console.log(`${user.name}'s birthday is on ${formattedBirthday}`);
// Output: John Doe's birthday is on 05/15/1990

Output:

Typescript format Date as MM-DD-YYYY using toLocaleString

In this example, we have a user object with the birthday property stored in the ISO format. We create a Date object from the birthday string and then format it using toLocaleString() with the desired options. Finally, we log the user’s name and formatted birthday.

Check out; Create a Date from Year, Month, and Day in TypeScript

I hope you now understand how to format dates as MM/DD/YYYY in TypeScript. Using the toLocaleString() method with the ‘en-US‘ locale makes it super easy to display dates in the American format. We also covered how to handle different input formats, use custom separators, and deal with timezone differences.