Whether you’re working on a calendar app, generating reports, or performing date-based calculations, retrieving the month from a date is a common task. We’ll explore different methods to accomplish this and provide practical examples along the way.
In this tutorial, I will explain how to extract the month from a date object in TypeScript.
Understanding the Date Object in TypeScript
Before we dive into extracting the month, let’s briefly discuss the Date object in TypeScript. The Date object represents a specific moment in time and provides various methods to work with dates and times. It allows you to create, manipulate, and extract different components of a date, such as the year, month, day, hours, minutes, and seconds.
To create a new Date object in TypeScript, you can use the following syntax:
const currentDate = new Date();This creates a Date object representing the current date and time.
Getting the Month from a Date
TypeScript provides the getMonth() method to extract the month from a Date object. However, it’s important to note that the getMonth() method returns a zero-based value, where 0 represents January, 1 represents February, and so on, up to 11 representing December.
Here’s an example of how to use the getMonth() method:
const currentDate = new Date();
const month = currentDate.getMonth();
console.log('Current Date: ' + currentDate);
console.log('Month: ' + month);In this example, we create a Date object representing the current date and time. We then call the getMonth() method on the currentDate object to retrieve the month.
Output:
The resulting month variable will contain the zero-based month value. For example, it will return ‘0‘ for January and ‘4‘ for May.
Adjusting the Month Value
Since the getMonth() method returns a zero-based value, which may not be intuitive to work with. To get the month number in the familiar 1-12 range, you can simply add 1 to the result of getMonth().
Here’s an example:
const currentDate = new Date();
const month = currentDate.getMonth() + 1;
console.log('Current Date: ' + currentDate);
console.log(month); // Output: Current month in the range of 1-12Output:
Now the month variable will contain the month number in the range of 1 to 12, where 1 represents January, 2 represents February, and so on.
Check out: How to Set a Date Value to Null in TypeScript
Handling Different Date Formats
In some cases, you may have a date stored as a string in a specific format. To extract the month from such a date string, you need to create a Date object from the string and then use the getMonth() method.
For example, let’s say you have a date string in the format “YYYY-MM-DD”:
const dateString = "2025-07-04";
const date = new Date(dateString);
const month = date.getMonth() + 1;
console.log('Month: ' + month); // Output: 7In this example, we create a Date object by passing the dateString to the Date constructor. TypeScript automatically parses the string and creates a valid Date object.
Output:
We can then use the getMonth() method to extract the month and adjust it to the 1-12 range by adding 1.
Real-World Example
Let’s consider a real-world scenario where you need to display the month name based on a given date. We’ll use a person’s birthday as an example.
const birthday = new Date("1990-05-15");
const monthNames = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const monthIndex = birthday.getMonth();
const monthName = monthNames[monthIndex];
console.log(`John's birthday is in ${monthName}.`);
// Output: John's birthday is in May.Output:
In this example, we have a birthday variable representing John’s birthday. We create an array called monthNames that holds the names of the months.
We use the getMonth() method to retrieve the zero-based month index from the birthday date.
Finally, we use the monthIndex to access the corresponding month name from the monthNames array and display it in the console.
Check out: Get the Current Date in TypeScript
Handling Edge Cases
When working with dates, it’s important to handle edge cases and ensure that your code behaves correctly. Here are a few things to keep in mind:
- Invalid Dates: If you create a
DateIf the object has an invalid date string or invalid parameters, the resulting date will be “Invalid Date”. Make sure to validate and handle such cases appropriately. - Timezone Considerations: By default, the Date the object uses the local timezone of the system. If you’re working with dates across different time zones, you may need to use methods getUTCMonth() to retrieve the UTC (Coordinated Universal Time) month instead of the local month.
- Localization: If your application needs to display dates in different locales or languages, you may want to use libraries like Intl.DateTimeFormat to format the dates according to the desired locale.
Conclusion
In this tutorial, we learned how to get the month from a date in TypeScript. We used the Date object and the getMonth() method. Since getMonth() gives a value from 0 to 11, we saw how to add 1 to match the usual 1 to 12 month format.
We also looked at different date formats and how to show the month name. These examples help in real projects like building calendars or reports. Make sure to think about special cases, time zones, and language settings when working with dates.
I hope this tutorial made it easy to understand how to get the month from a date in TypeScript. Keep practicing with more examples to get even better at it.
You can also check out the below Typescript blogs:
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.
