Datepicker - Language support

[RodrigoPauletti]

Issue type

I'm submitting a ...

• [ ] bug report
• [x] feature request

Issue description

Current behavior:

1. The calendar's language it's only in english;
2. When I select the data range, the input show that "Feb 6, 2019 - Feb 9, 2019";

Expected behavior:

1. The calendar's language in many languages;
2. I want to show that in input "06/02/2019 - 09/02/2019" or "06 de fevereiro de 2019 - 09 de fevereiro de 2019" (Brazilian language);

Other information:

npm, node, OS, Browser

Node, npm: v9.11.1 and 5.6.0
OS: Windows 8.1
Browser: Chrome

Angular, Nebular

Angular: 7.2.3
Nebular: 3.0.0

[yggg]

Hi @RodrigoPauletti! Under the hood, datepicker uses angular LOCALE_ID to format date to a string. So after you provide it, the output will be localized. See example (file: app.module.ts). Details on i18n angular.

Keeping the issue open, as we need to add localization details to the docs.

[RodrigoPauletti]

@yggg It works! Thanks, bro.

[p-spacek]

Hi It still doesn't work properly unfortunately. The are 2 problems: 1) if you check formControl errors, there's invalid date if format is little bit different from english for example: czech date format (cs-CZ) is 'D. M. YYYY' if you choose 28.3.2019 from picker correct string is inserted into input. But there will be validation error on formControl.

2) if you change date directly in the input, locale format isn't used ex: 28.3.2019 -> 29.3.2019

tryit: https://stackblitz.com/edit/localeid-datepicker-localization-2

[yggg]

Hi @p-spacek! Thanks for the example, I can see the issue. As a workaround until the fix, you can use date-fns or moment service, then everything should work. See Formatting Issue in the docs for guidance on how to install and use different date services.

[p-spacek]

Hi @yggg , i'm afraid that this doesn't help. Behave is the same. I'm not able to show it on stackblitz - I have some problems add nebular/date-fns :-/ https://stackblitz.com/edit/localeid-datepicker-localization-2-w6uat3, but in my enviroment it doesn't work.

[johnsnow20087349]

Hi It still doesn't work properly unfortunately. The are 2 problems:

1. if you check formControl errors, there's invalid date if format is little bit different from english for example: czech date format (cs-CZ) is 'D. M. YYYY' if you choose 28.3.2019 from picker correct string is inserted into input. But there will be validation error on formControl.
2. if you change date directly in the input, locale format isn't used ex: 28.3.2019 -> 29.3.2019

tryit: https://stackblitz.com/edit/localeid-datepicker-localization-2

same issue here formControl validation error when language is zh-cn

[yestaro]

Hi, I use format yyyy-MM-dd, and the range-picker will not change after input value changed. It seems NbRangeAdapterService use '-' to split range start / end.

parse(range: string, format): NbCalendarRange<D> { const [start, end] = range.split('-').map(subDate => subDate.trim());

I think it should be use range.split(' - ') instead of range.split('-')

[cesarochoa2006]

I have changed language succesfully, but the calendar still shows "today". How can i fix or change it ? I have opted to hide it with property showHeader=false, but i still wish to know how to change it.

[DprDeveloper]

@yggg I have any problem with you example in my proyect. If i change the language for es, in your example is success but in my project i can´t pick janurary,april,august and december days. The input is empty, what happend? IMPORTANT the problem is caused for nb-rangepicker, however with datepicker is success

[gawielgo]

further question, what if i want to implement a translation service to allow two languages ​​in my app? could there be the possibility to change calendar language when a LangChangeEvent occurs???

[alhussien76]

any updates here I want to add another language.