How to Format JavaScript Dates with Ordinal Number Suffixes (-st, -nd, -rd, -th) using DayJS

JavaScript is a powerful language that is widely used for web development, and it provides multiple ways to manipulate dates and times. However, formatting dates with ordinal number suffixes like -st, -nd, -rd, or -th can be a bit tricky and cumbersome with vanilla JavaScript. This is where DayJS comes to the rescue. DayJS is a lightweight, easy-to-use library that simplifies date and time manipulation. In this blog post, we will show you how to format JavaScript dates with ordinal number suffixes using DayJS, along with some examples and explanations.

Introduction to DayJS

DayJS is a minimalist JavaScript library for modern browsers that provides a simple and elegant API for working with dates and times. It is an excellent alternative to other JavaScript date libraries like Moment.js, mainly because of its small size (2KB) and performance. DayJS is also immutable, chainable, and has a rich set of plugins to extend its functionality.

To get started with DayJS, you can install it using npm or yarn:

or

Alternatively, you can include it in your HTML file via CDN:

Formatting Dates with DayJS

DayJS provides a clean and straightforward API to format dates. To format a date, you need to create a DayJS object and then use the format() method to specify the desired format.

Here’s an example:

In this example, we import DayJS, create a DayJS object representing the current date, and then format it using the format() method. The format string 'MMMM D, YYYY' specifies that we want to display the full month name, the day of the month, and the year.

Adding Ordinal Number Suffixes with DayJS

Now, to add ordinal number suffixes like -st, -nd, -rd, or -th to your dates, you can use the AdvancedFormat plugin provided by DayJS.

Import the plugin and extend DayJS with it:

Now you can use the Do token in your format string to include ordinal number suffixes:

In this example, we import DayJS and the AdvancedFormat plugin, extend DayJS with the plugin, and then use the Do token in the format string to include the ordinal number suffix.

Example: Displaying a Date Range with Ordinal Number Suffixes

Let’s say you want to display a date range like “October 1st, 2021 – October 31st, 2021”. You can easily do this with DayJS:

In this example, we create two DayJS objects representing the start and end dates of our range and then format them using the Do token to include the ordinal number suffixes.

FAQ

Q: Can I use DayJS with other libraries like React or Angular?

A: Yes, DayJS works seamlessly with popular frontend libraries and frameworks like React, Angular, and Vue.js. You can use DayJS to format dates within your components or create custom date filters and directives.

Q: How can I format dates in different languages using DayJS?

A: DayJS supports internationalization (i18n) out of the box. You can import and extend your desired locale, and DayJS will automatically format dates in that language. Check the official documentation for more information on how to use i18n with DayJS.

Q: Can I use DayJS to parse dates in different formats?

A: Yes, DayJS provides a flexible API to parse dates from strings, numbers, or other formats. You can use the dayjs() function to parse dates in various formats or use the CustomParseFormat plugin for more advanced parsing options. Check the official documentation for more information on parsing dates with DayJS.

Q: Is DayJS compatible with other date libraries like Moment.js?

A: DayJS aims to provide a similar API to Moment.js, making it easier for developers to switch from Moment.js to DayJS. While some differences exist, most of the API methods and features are compatible, making the transition relatively smooth.

In conclusion, DayJS is a powerful and lightweight library that significantly simplifies date and time manipulation in JavaScript. By using DayJS and its plugins, you can easily format JavaScript dates with ordinal number suffixes and harness the numerous other features and capabilities that the library provides. Happy coding!