feat: datetime, allow for locales not supported by the browser

[almaz1213]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

the previous version of ion-datetime has monthNames property. it was useful to set month names up for any app localisation even the app language no in localisation standarts. also we would like to set weekdays' names to any. is there way to do that in ionic 6?

also there are many tiny uncomfy stuff, such as:

• imposible to set title for the component;
• ionChange does not change value property;
• does not show cancel and done buttuns even cancelText and doneText are set

Expected Behavior

• must be title, monthNames and weekNames properties;
• ionChange must change value property;
• must show cancel and done buttons that. done button must emit iolDone event

Steps to Reproduce

just like in https://ionicframework.com/docs/api/datetime

Code Reproduction URL

No response

Ionic Info

Ionic CLI : 6.20.1 (/home/diamo/.nvm/versions/node/v16.15.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.1.11 @angular-devkit/build-angular : 14.0.3 @angular-devkit/schematics : 14.0.3 @angular/cli : 14.0.3 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.6.0 @capacitor/android : 3.6.0 @capacitor/core : 3.6.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally

Additional Information

No response

[liamdebeasi]

Thanks for the issue. The datetime component in Ionic 6 is automatically localized based on the user's locale: https://ionicframework.com/docs/api/datetime#localization. As a result, the monthNames and dayNames properties are no longer needed.

You can also use the locale property to set a custom locale instead of having the browser automatically determine the locale.

---

For the other issues, I am unable to assist unless I can reproduce those behaviors on my end. Can you please provide a GitHub repo?

[almaz1213]

Thanks @liamdebeasi for link to docs that i knew. if our UI languages not in local standards? can ionic team get the monthNames and weekDays back?

[liamdebeasi]

Can you help me better understand your use case? Which language are you using?

[almaz1213]

@liamdebeasi our project allows add any language to UI. there are many languages that not in local standards. as an example, Tatar language in local standard comes with Cyrillic (Russian) symbols. but there are users that wants use Turkish or Azerbaijan or Latin symbols in Tatar language

[liamdebeasi]

Thanks! At the moment ion-datetime only supports locales that the browser supports, so I can confirm that we do not support Tatar with non-Cyrillic scripts at the moment.

I will keep this issue open to collect feedback from the community regarding other use cases that may call for monthNames and dayNames.

[almaz1213]

OK thanks. i see IonDatetime interface in https://github.com/ionic-team/ionic-framework/blob/main/angular/src/directives/proxies.ts but i could not see implementation of ion-datetime in source codes. do that features i ask to bring back depend on angular implementation level?

[liamdebeasi]

Any feature we add will be compatible with the JavaScript Frameworks we support. For Ionic 6, that means Angular 12.0-14.x. See https://ionicframework.com/docs/reference/support#ionic-angular for more info.

[almaz1213]

@liamdebeasi so, where is the problem that disallow you to bring back monthNames property to ion-datetime?

[liamdebeasi]

There is no problem with adding it. I have labeled this issue as type: feature request which means this is something we are interested in adding to Ionic Framework. However, we are not actively working on this feature at the moment.

[almaz1213]

thanks @liamdebeasi. i wanted to work on that but i couldn't find the implementation of ion-datetime source code here in github. so, i asked about dependency on angular datetime. also, there are many other issues with new ion-datetime. eg. using @ViewChild('dtPicker') dtPicker: IonDatetime in controllers or hiding keyboard when select time.

[liamdebeasi]

The source code for datetime is here: https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/datetime

If you are running into other problems with datetime I recommend opening separate issues.

[almaz1213]

i downloaded source codes of ionic 5 to check how monthNames was implemented..

[liamdebeasi]

Sounds good. Just to set the appropriate expectations: All features (including community contributions) go through an internal design process, so feature PRs typically take a bit longer than bug fix PRs to get merged.

[robinmousley]

I wish to add my support to this feature request. Our app will be used in Madagascar. The locale mg-mg is supported by Angular, but not, apparently by ionic. So we can use date pipe to translate dates into Malagasy, but we cannot translate Month and Day names on the ion-datetime date picker.

[dalugoda]

Any update on this ? Having trouble to use si-LK (which supports angular) and this does not support :(

[mgltuba]

in Mongolian language month names too long for example (нэгдүгээр сар, хоёрдугаар сар) etc. i want (1-р сар, 2-р сар) etc