Add support for Taiwan ROC calendar adapter to custom calendar system

[afuyoyo]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

I would like to request a new feature to add support for the Taiwan Republic of China (ROC) calendar adapter in the custom calendar system, similar to the existing Hijri (Islamic) calendar adapter.

Currently, the custom calendar system in MUI-X does not have built-in support for the Taiwan ROC calendar, which is widely used in Taiwan. This calendar system is important for applications targeting users in Taiwan, as they may prefer to see dates displayed in the ROC calendar format.

Examples 🌈

Similar to how the Hijri calendar adapter is implemented, it would be great to have a built-in adapter for the ROC calendar. This would allow users to easily configure the custom calendar system to display dates in the Taiwan ROC format.

Here's a high-level outline of the desired feature:

1. Create a new adapter for the ROC calendar system.
2. Implement the necessary methods for date manipulation and formatting in the ROC calendar system.
3. Include an example in the documentation on how to use the ROC calendar adapter with the custom calendar system.

The Taiwan ROC calendar system is based on the Gregorian calendar but uses a different starting point (1912, the founding year of the Republic of China). The current year in the ROC calendar is calculated by subtracting 1911 from the Gregorian year. For example, 2023 in the Gregorian calendar is equivalent to the ROC year 112.

Motivation 🔦

Adding support for the Taiwan ROC calendar adapter would:

Enhance the user experience for Taiwanese users by providing a familiar and localized calendar system. Increase the willingness of developers to adopt the MUI-X package for applications targeting the Taiwanese market.

Order ID 💳 (optional)

No response

[alexfauquette]

To do so, you will need different points.

1. A library supporting the calendar. Adapters are adapting date library, not calendars. For example, the hijri calendar is based on moment-hijri
2. Create the date-io adapter which are one file containing all the methods
3. Add some extra methods to the adapter to let it work with our codebase. Xe can do this part if needed

[afuyoyo]

Thank you for your response.

After going back and taking a closer look, I found that my original dateAdapter was working fine, but it stopped functioning when I upgraded from MUI v4 to v5. The error message displayed is:

Error: MUI: The date adapter should be imported from @mui/x-date-pickers or @mui/x-date-pickers-pro, not from @date-io. For example, import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs' instead of import AdapterDayjs from '@date-io/dayjs'. More information on the installation documentation: https://mui.com/x/react-date-pickers/getting-started/#installation

Following your suggestion, I've created a v5-compatible adapter, but it still doesn't work correctly. I've uploaded the relevant code to this CodeSandbox: https://codesandbox.io/s/momenttaiwan-x3y2ts?file=/demo.js

The CodeSandbox includes my v4 implementation of pickersUtilsTaiwan.js and the date library momentTaiwan.js, as well as the newly adapted TaiwanMomentUtils.js based on your recommendations. However, it still doesn't seem to be functioning properly.

Could you please advise if there are any additional steps I need to take? I apologize for any inconvenience, as I'm not very familiar with this topic. Thank you once again for your assistance.

[alexfauquette]

It seems there is some confusion with versions, because the error message you report has been introduced in v6.0.0-alpha-10 (#6972), and your codesandbox is also using v6.

For the v5 there is no error: https://codesandbox.io/s/momenttaiwan-forked-sy06gx?file=/demo.js

For the v6, as mentionned previously, you need to add extra information. Since you are using moment, did a codesandbox by copying the moment adapter: https://codesandbox.io/s/momenttaiwan-forked-2hmb41?file=/TaiwanMomentUtils.ts:219-231

In both cases, the current year is still displayed as 2023. Is it because your wrapper needs special tokens like the token jYYYY in moment-hijri?

[afuyoyo]

Thank you for your response and the clarification on versions.

I have implemented a special token tYY in my momentTaiwan utility, which should be able to properly convert Gregorian years to Taiwanese calendar years when used with twMoment. However, I'm still encountering issues with the MUI calendar and adapter not functioning as expected.

Here is my v5 CodeSandbox: https://codesandbox.io/s/momenttaiwan-forked-9dg9t0?file=/demo.js

I would like to know if I need to perform any additional steps or modifications to make the special token tYY work correctly with the MUI calendar and adapter. Any guidance or suggestions would be greatly appreciated.

[alexfauquette]

If you introduce new tokens, you need to explain to the component when to use it.

To do so, the LocalizationProvider has a dateFormats props. All the needed formats are defined in date-io docs

You custom adapters should allows to override some of them as follow

class TaiwanMomentUtils extends MomentUtils {
-  constructor({ locale = "zh-tw", instance = tMoment } = {}) {
-    super({ locale, instance });
+  constructor({ locale = "zh-tw", instance = tMoment, formats } = {}) {
+    super({ locale, instance, formats });
  }
}

Here is your codesandobox displaying the correct year

https://codesandbox.io/s/momenttaiwan-forked-6spw5s?file=/demo.js

Dit you thought about opening a PR in date-io to share your adapter with the community?