# O3: Embedding "International calendars - DatePicker and Date Converter" to O3

**URL:** <https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226>\
**Category:** Development\
**Tags:** date, i18n, ethiohri, ohri, o3\
**Created:** [January 3, 2023, 12:26pm UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226 "2023-01-03T12:26:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sinte](https://talk.openmrs.org/letter_avatar/sinte/32/5_5575768a8748004e209b776fc1b2916d.png) [@sinte](https://talk.openmrs.org/u/sinte)\
**Post date:** [January 3, 2023, 12:26pm UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226/1 "2023-01-03T12:26:31Z")

</div>

Hi, all Again,

It’s January 2, 2023, now when I write this post in the gregorian calendar but it’s Tahisase 24, 2015, here in Ethiopia which uses Ge’ez Calendar.

**What is International Calander** While most of the world uses the Gregorian calendar, there are several regional calendar eras used around the world. this includes the Julian, the Hindu, the Hijri/Islamic, Buddhist, Japanese, Chinese, and the Hebrew calendar.

**Why International Calander** As nice as it would be, the world doesn’t have one universal way to tell time. Each month has a different name depending on the country, some religions use the moon while others use the sun, and Ethiopia is even 7 years behind America!

**Lets Go To the Business** it’s been a while since ICAP Ethiopia (EthiOHRI team) raised this concept and there is also a [tread](https://openmrs.slack.com/archives/C02UNMKFH8V/p1655843528586889) in Slack about how to integrate International Calendar into the O3 registration form. and yes we have successfully have integrated [react-spectrum Datepicker](https://react-spectrum.adobe.com/react-spectrum/DatePicker.html) which uses [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string) and we have create a [configuration](https://o3-dev.docs.openmrs.org/#/main/config) for that

 ![image](https://talk.openmrs.org/uploads/default/original/3X/0/5/05f24d371aafaf97c2577f6237f1707a8c9819a2.jpeg)

[git link](https://github.com/CDC-HIS/openmrs-esm-patient-management/tree/feature/InternationalCalendars)

We have just implemented this for the registration page but there are plenty of forms in O3 with Datepicker and we can’t go over each one. but there must be some way to control rather than frontend [configuration system](https://o3-dev.docs.openmrs.org/#/main/config). also, we need to implement a date converter as when the dates are shown in the list or view page it should be in respective calendars.

we are open to any suggestions and implementation plans as we are eager for any solutions

cc: @bistenes, @jdick, @mksd, @dkibet, @mayanja, @eudson, @grace, @dagimm, @zacbutko @ibacher

---

<div class="post-metadata">

**Author:** ![grace](https://talk.openmrs.org/user_avatar/talk.openmrs.org/grace/32/16942_2.png) [@grace](https://talk.openmrs.org/u/grace)\
**Post date:** [January 6, 2023, 4:34am UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226/2 "2023-01-06T04:34:13Z")

</div>

Great to hear from you @sinte!! I miss working with your whole team. Hope to see you in Addis some day.

It’s good to hear this progress. I believe [@Mekom](https://talk.openmrs.org/groups/mekom) might be interested in partnering on this issue, as their project in Cambodia also (I believe) requires a non-gregorian calendar. Actually I think they were planning to use the Thai calendar provided by the [jQuery library](http://keith-wood.name/calendars.html) you originally were using.

I have a few questions:

- @sinte are you no longer using the jQuery Library anymore? Is that replaced by integrating the react-sprectum Datepicker?
- @dennis or @vasharma05 or @ibacher: Looking at this code, do you think we could/should pull this into the O3 RefApp? (Of course we’d set the default to Eng etc) [https://github.com/CDC-HIS/openmrs-esm-patient-management/commit/76cda8fe6d43f93820715db951cb43267c63bf1d](https://github.com/CDC-HIS/openmrs-esm-patient-management/commit/76cda8fe6d43f93820715db951cb43267c63bf1d)

And some clarifications: So @sinte just to make sure I understand you correctly:

- **Goal #1: You want to leverage the i18n’d datepicker in forms, not just in the registration page, correct?** I thought this work was already done by @amanryder? As shown here: [https://talk.openmrs.org/t/o3-supporting-non-western-calendars-ethiopia-and-beyond/36566/3](https://talk.openmrs.org/t/o3-supporting-non-western-calendars-ethiopia-and-beyond/36566/3) Is this work no longer being used?

- **Goal #2:** You also want **a single place** to set date configuration for the entire EMR, correct?

- **Goal #3:** You then want anywhere that a date shows up in any widgets to be converted, e.g. like dates shown here, correct? ![image](https://talk.openmrs.org/uploads/default/original/3X/b/3/b34871089e1734401dfb7dda39c90e50ab854987.png)

---

<div class="post-metadata">

**Author:** ![sinte](https://talk.openmrs.org/letter_avatar/sinte/32/5_5575768a8748004e209b776fc1b2916d.png) [@sinte](https://talk.openmrs.org/u/sinte)\
**Post date:** [January 13, 2023, 7:42am UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226/3 "2023-01-13T07:42:33Z")

</div>

Thanks @grace and we have missed working with you too.

and to answer your questions

- yes we no longer use jQuery Library anymore, as we have a recommendation from @ibacher and @zacbutko here [https://openmrs.slack.com/archives/C02UNMKFH8V/p1655852343053049?thread\_ts=1655843528.586889&cid=C02UNMKFH8V](https://openmrs.slack.com/archives/C02UNMKFH8V/p1655852343053049?thread_ts=1655843528.586889&cid=C02UNMKFH8V)

**The goal is**

1. To Use React-spectrum Datepicker and we have also changed @amanya implementation as it uses jQuery Library. now we already implemented it for all of our forms (OHRIFORMS) @samuel34 can give us a detailed explanation about that.

2. Yes we want a single place to set date configuration for the entire EMR, not only for the Forms, and Registration Page but for Appointments and all date-related fields.

3. Yes exactly we need to show the user the converted dates, not the default, AND this is also for the entire EMR date-related widgets.

4. Yes it includes Dates of Birth.

if [@Mekom](https://talk.openmrs.org/groups/mekom) have already started this implementation we are happy to hear that @mksd@achachiez @ruhanga @enochb

---

<div class="post-metadata">

**Author:** ![grace](https://talk.openmrs.org/user_avatar/talk.openmrs.org/grace/32/16942_2.png) [@grace](https://talk.openmrs.org/u/grace)\
**Post date:** [January 13, 2023, 11:23pm UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226/4 "2023-01-13T23:23:37Z")

</div>

Good to hear from you Sinte and I hope to help - we definitely need to sort this out together for our overall O3 i18n strategy.

From a quick review - the scope of implementing a single config component might be big-ish, given there are many different O3 apps leveraging date-type fields: \>[30](https://github.com/openmrs/openmrs-esm-core/search?q=date) in esm-core, \>[180](https://github.com/openmrs/openmrs-esm-patient-chart/search?q=date) in esm-patient-chart and \>[140](https://github.com/openmrs/openmrs-esm-patient-management/search?q=date) in esm-patient-management. Mind you maybe it’s just a refactoring challenge, once the component has been built.

It looks like omrsDateFormat could be the component to focus on but I’m not sure.

@sinte or @dagimm is your team interested in partnering with an org to build this config out? I might be able to find some OMRS Inc resource to help with the Architecture but we’ll most likely need help with manpower when it comes to implementing it. I’ll also raise this with the whole tech team [in next week’s TAC call](https://talk.openmrs.org/t/improving-tac-calls-in-2023-time-and-structure-changes/38271).

Minor Clarifications:

- Would you also expect config for hourCycle? E.g. do you find that your users sometimes require a 12hr cycle instead of a 24hr cycle?
- You would expect this Date-config to be _separate_ and _unaware_ of [this browser-based i18n feature](https://github.com/openmrs/openmrs-esm-root-config/blob/3046c8fd7c8d12b5e20be8aca8163910a797d64a/src/i18next/init-i18next.js), right?
- Did you have any thoughts/replies to this thread: [O3: Config to set a standard date/time convention throughout App?](https://talk.openmrs.org/t/o3-config-to-set-a-standard-date-time-convention-throughout-app/35726)

Pinging also @mogoodrich & @mseaton & @dkayiwa b/c they’ve suffered through so much of OMRS’ i18n history and may have some sage advice here - e.g. Mark & Mike, do you guys have a Date locale config you use for PIH EMRs?

---

<div class="post-metadata">

**Author:** ![dagimm](https://talk.openmrs.org/letter_avatar/dagimm/32/5_5575768a8748004e209b776fc1b2916d.png) [@dagimm](https://talk.openmrs.org/u/dagimm)\
**Post date:** [January 18, 2023, 10:38am UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226/5 "2023-01-18T10:38:44Z")

</div>

Hi @grace, We really want to collaborate on sorting this out. We can dedicate a person to work on this. It would be great if @grace can help us coordinate this so we can start to work on it. FYI @sinte

---

<div class="post-metadata">

**Author:** ![bistenes](https://talk.openmrs.org/user_avatar/talk.openmrs.org/bistenes/32/18573_2.png) [@bistenes](https://talk.openmrs.org/u/bistenes)\
**Post date:** [July 27, 2023, 5:00pm UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226/6 "2023-07-27T17:00:35Z")

</div>

This is a really interesting thread. Did anyone follow up with @sinte ? Do we have a plan for datepicker internationalization in O3? @ibacher @dennis @mksrom

---

<div class="post-metadata">

**Author:** ![bistenes](https://talk.openmrs.org/user_avatar/talk.openmrs.org/bistenes/32/18573_2.png) [@bistenes](https://talk.openmrs.org/u/bistenes)\
**Post date:** [July 27, 2023, 5:05pm UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226/7 "2023-07-27T17:05:12Z")

</div>

Oh + @amanryder , just seeing the post about your work: [https://talk.openmrs.org/t/o3-supporting-non-western-calendars-ethiopia-and-beyond/](https://talk.openmrs.org/t/o3-supporting-non-western-calendars-ethiopia-and-beyond/)

---

<div class="post-metadata">

**Author:** ![ibacher](https://talk.openmrs.org/user_avatar/talk.openmrs.org/ibacher/32/19751_2.png) [@ibacher](https://talk.openmrs.org/u/ibacher)\
**Post date:** [July 27, 2023, 5:46pm UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226/8 "2023-07-27T17:46:27Z")

</div>

> [@bistenes](#):
>
> Do we have a plan for datepicker internationalization in O3?

I don’t know that we have anything concrete, but it’s a real need. I was hoping to look into implementing something with a similar API to the Carbon components using either react-spectrum or, failing that, the @internationalized/date library. The idea was to make it as simple as possible to just swap out our uses of Carbon’s calendar components with components that are able to handle non-Gregorian dates.

---

<div class="post-metadata">

**Author:** ![bistenes](https://talk.openmrs.org/user_avatar/talk.openmrs.org/bistenes/32/18573_2.png) [@bistenes](https://talk.openmrs.org/u/bistenes)\
**Post date:** [July 28, 2023, 4:04pm UTC](https://talk.openmrs.org/t/o3-embedding-international-calendars-datepicker-and-date-converter-to-o3/38226/9 "2023-07-28T16:04:33Z")

</div>

Awesome. I support that. Maybe we should create a new ticket for this and cancel [[O3-998] Datepicker date format should be locale-sensitive - OpenMRS Issues](https://issues.openmrs.org/browse/O3-998) .
