Hello there,
I wanted to give an update regarding the issue with multi-calendar support. As some of you may be aware, Ian created a JIRA ticket to address the limitations of the Carbon-provided DatePicker and DatePickerInput components. [O3-1991] Add OpenMRS Date Components - OpenMRS Issues The main issues were the lack of support for multiple calendars and varying date formats. This was raised during the Ethiopia Hackathon too as Ethiopia uses a different calendar system (Ge’ez).
After researching the problem, I decided to explore the React Spectrum library, which provides a DatePicker component with support for multiple calendars built on the @internationalized/date library. I have successfully created a minimal demo implementing the calendar with different locales and calendar systems, such as Ge’ez (Ethiopic), Gregorian, and Khmer calendars. The demo uses the minimum number of dependencies from React Spectrum without importing the entire library.
You can check out the live demo here: https://placid-omrs-datepicker.surge.sh
And the source code here: DatePicker Component with Multi-Calendar Support · GitHub
The next step is to focus on styling to ensure the DatePicker matches the OpenMRS styleguide and is visually compatible with Carbon and OpenMRS’s customizations to Carbon.
There are a couple of downsides observed so far:
- There seems to be a bug when selecting the first day of a leap year in the Ethiopian calendar. It is currently unclear whether it’s a bug in the library, a mistake in our implementation, or a known issue.
- I have not yet found a way to pick years or months individually as we can do in the Carbon DatePicker. I couldn’t dig deeper yet.
I would appreciate any feedback or suggestions from the community.