While working on a recent feature that displayed important dates in a user-friendly format, I encountered an issue. The ISO date string, like “2025-07-04T00:00:00.000Z,” was showing up as July 3 instead of July 4 in the UI. At first, it seemed like a simple formatting issue, but it turned out to be a classic time zone issue that comes with handling ISO date strings in TypeScript.
If you’ve faced something similar, like seeing a date appear a day early or late when rendering it in a frontend app, this tutorial is for you.
In this tutorial, I will explain how to handle ISO Date strings in TypeScript using the Date object and Intl.DateTimeFormat.
Understanding the ISO 8601 Date Format
The ISO 8601 standard is an internationally recognized way to represent dates and times. It provides a clear and unambiguous format that is easy to parse and understand across different systems and languages. In TypeScript, the Date object’s toISOString() method returns a string in the ISO 8601 format, which looks like this: YYYY-MM-DDTHH:mm:ss.sssZ.
For example, a variable currentDate represents the current date and time in New York City. When we call currentDate.toISOString(), it might return a string like “2025-06-15T09:30:00.000Z”.
Check this out: Add Months to a Date in TypeScript
Parsing ISO Date Strings in TypeScript
When working with APIs or receiving data from external sources, you may encounter ISO date strings that need to be converted into TypeScript Date objects. To parse an ISO date string, you can simply pass it to the Date constructor:
const dateString = "2025-06-15T09:30:00.000Z";
const parsedDate = new Date(dateString);
console.log(parsedDate); // Output: 2025-06-15T09:30:00.000ZOutput:
In this example, parsedDate is a valid Date object that represents the same moment in time as the ISO date string.
Formatting Dates as ISO Strings in TypeScript
There may be situations where you need to convert a Date object back into an ISO date string. This can be achieved using the toISOString() method:
const currentDate = new Date();
const isoString = currentDate.toISOString();
console.log(isoString); // Output: "2025-06-20T08:09:43.118Z"Output:
The toISOString() method returns a string representation of the date in the ISO 8601 format, which is always in UTC (Coordinated Universal Time).
Check this out: How to Get the Month from a Date in TypeScript
Handling Time Zones and Local Dates in TypeScript
When dealing with dates and times, it’s crucial to consider time zones. ISO date strings are typically represented in UTC, but you may need to display dates in the user’s local time zone. TypeScript provides the toLocaleString() method to format dates according to the specified locale:
const eventDate = new Date("2025-07-04T16:00:00.000Z");
const localeDateString = eventDate.toLocaleString("en-US", {
timeZone: "America/New_York",
});
console.log(localeDateString); // Output: "7/4/2025, 12:00:00 PM"Output:
In this example, we have an event date stored as an ISO string in UTC. By using toLocaleString() By specifying the “en-US” locale and the “America/New_York” time zone, we can display the date and time in the Eastern Time Zone, which is commonly used in the United States.
Check out: Add Minutes to a Date in TypeScript
Advanced Date Formatting with Intl.DateTimeFormat in TypeScript
For more advanced date formatting options, TypeScript provides the Intl.DateTimeFormat object. It allows you to customize the format of the date and time based on the locale and specific formatting options:
const independenceDay = new Date("2025-07-04T00:00:00.000Z");
const formattedDate = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC",
}).format(independenceDay);
console.log(formattedDate); // Output: "July 4, 2025"Output:
Here, we use Intl.DateTimeFormat to format the date of Independence Day in the United States. We specify the “en-US” locale and provide an options object to include the year, month (in long format), and day.
Check this out: How to Compare Dates Without Time in TypeScript
Best Practices and Tips
When working with ISO date strings and Date objects in TypeScript, keep the following best practices in mind:
- Always use the ISO 8601 format for storing and transmitting dates to ensure compatibility and consistency across systems.
- Be aware of time zones and consider the user’s locale when displaying dates and times.
- Use the built-in TypeScript Date methods and the Intl.DateTimeFormat object for parsing, formatting, and manipulating dates.
- Handle invalid or malformed date strings gracefully by wrapping parsing code in a try-catch block or using validation libraries.
Conclusion
In this tutorial, we learned how to handle ISO date strings in TypeScript, focusing on the common issues caused by time zone differences and how to avoid unexpected date shifts. From understanding how the Date object works to formatting dates correctly using Intl.DateTimeFormat, we covered practical examples that reflect real-world scenarios.
I hope you now have a better understanding of how to work with ISO date strings in TypeScript and can confidently format and display dates accurately in your applications.
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
