Format Dates in TypeScript as YYYY-MM-DD

When working with dates in TypeScript, formatting them into a readable or standardized structure is often necessary, especially for storing in databases or displaying in user interfaces. One of the most common formats used in web development is YYYY-MM-DD, which ensures consistency across systems and locales.

In this tutorial, you’ll learn to format dates in TypeScript as YYYY-MM-DD format using built-in TypeScript methods and external libraries.

Why Date Formatting Matters in TypeScript

When working on a project for a client in New York, I encountered an issue with date formatting. The application displayed dates in different formats, leading to confusion among users. Standardizing the date format to YYYY-MM-DD helped resolve these issues and made the data more readable and consistent.

Understanding the Date Object in TypeScript

TypeScript, like JavaScript, uses the Date object to handle dates and times. The Date object provides various methods to manipulate and format dates. Here’s a quick overview of creating a date in TypeScript:

let currentDate = new Date();
console.log(currentDate); // Outputs the current date and time

Output:

Check out: Convert Number to Date in TypeScript

Formatting Dates as YYYY-MM-DD in TypeScript

To format a date as YYYY-MM-DD, we need to extract the year, month, and day from the Date object and then combine them into the desired format. Here’s how you can do it:

let date = new Date();
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');

let formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Outputs the date in YYYY-MM-DD format

Output:

Breaking Down the Code:

1. Extracting the Year: The getFullYear() method returns the year of the specified date.
2. Extracting the Month: The getMonth() method returns the month (0-11). We add 1 to get the correct month number (1-12).
3. Extracting the Day: The getDate() method returns the day of the month (1-31).
4. Padding the Month and Day: We use padStart(2, ‘0’) to ensure the month and day are always two digits.

Handle Time Zones in TypeScript Date Format

When working on a project for a client in Los Angeles, I realized the importance of handling time zones correctly. The Date object in JavaScript and TypeScript is based on the local time zone of the system running the code. To ensure consistency, especially in applications used across different time zones, consider using UTC dates:

let date = new Date();
let year = date.getUTCFullYear();
let month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
let day = date.getUTCDate().toString().padStart(2, '0');

let formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Outputs the UTC date in YYYY-MM-DD format

Output:

Check out: Format Dates in TypeScript

Use External Libraries to Format Date in TypeScript

For more complex date manipulations and formatting, consider using libraries like date-fns or moment.js. These libraries provide robust methods for handling dates and times.

Example with date-fns

import { format } from 'date-fns';

let date = new Date();
let formattedDate = format(date, 'yyyy-MM-dd');
console.log(formattedDate); // Outputs the date in YYYY-MM-DD format

Output:

Example with moment.js

import moment from 'moment';

let date = new Date();
let formattedDate = moment(date).format('YYYY-MM-DD');
console.log(formattedDate); // Outputs the date in YYYY-MM-DD format

Output:

Real-World Examples to Convert Date in YYYY-MM-DD Format

Scheduling Events

Suppose you are developing an application for a client in Chicago that schedules events. You need to display the event dates in YYYY-MM-DD format:

let eventDate = new Date('2025-03-25T10:00:00');
let year = eventDate.getFullYear();
let month = (eventDate.getMonth() + 1).toString().padStart(2, '0');
let day = eventDate.getDate().toString().padStart(2, '0');

let formattedEventDate = `${year}-${month}-${day}`;
console.log(`Event Date: ${formattedEventDate}`); // Outputs: Event Date: 2025-03-25

Output:

Check out: Get the Current Date in Milliseconds Using TypeScript

Storing Dates in Databases

When storing dates in a database for a project in San Francisco, it’s essential to ensure consistency. Using the YYYY-MM-DD format helps maintain uniformity:

Encapsulate the code in a function in dateFormat.ts so variables don’t impact the global/block scope:

export function formatDate(): string {
  let date = new Date();
  let year = date.getFullYear();
  let month = (date.getMonth() + 1).toString().padStart(2, '0');
  let day = date.getDate().toString().padStart(2, '0');

  let formattedDate = `${year}-${month}-${day}`;
  console.log("Formatted Date:", formattedDate);
  return formattedDate;
}

Then in database.ts (or any other file), import and use it:

import { formatDate } from './dateFormat';

function storeDateInDatabase(date: string): void {
  console.log(`Storing date in database: ${date}`);
}

const formattedDate = formatDate();
storeDateInDatabase(formattedDate);

Encapsulating the date formatting logic into a separate utility function promotes code reusability. It ensures that all stored dates follow the same consistent YYYY-MM-DD format across your TypeScript application.

Conclusion

In this tutorial, we have learned how to format dates in TypeScript into the standard YYYY-MM-DD format. You can create consistent date strings by breaking down the date into year, month, and day components and using methods like padStart().

This format is especially useful when storing dates in databases or sending them through APIs to ensure consistency and avoid errors.

By understanding the Date object, handling time zones, and leveraging external libraries, you can ensure your application displays dates correctly.

You may like to read:

• Calculate Yesterday’s Date in TypeScript
• Subtract Dates in TypeScript
• Check for Invalid Dates in TypeScript
• Calculate Number of Days Between Two Dates in TypeScript
• Convert Dates to UTC in TypeScript

Bijay Kumar

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.

enjoysharepoint.com/