Since the Close calendar string comes from the MatDatepickerIntl and is not hard-coded, this seems to be an issue with the demo, rather than the date picker itself.

This demo needs to implement proving a different value for MatDatepickerIntl because that is where the "Close calendar" string comes from. Here are roughly the steps that need to happen to implement this in the demo.

1. extend MatDatepickerIntl with French strings

class MatDatepickerIntlFr extends MatDatepickerIntl {
   closeCalendar: "
Fermer le calendrier"
  // ...
}

2. Inject MatDatepickerIntl into the example.
3. When clicking "Dynamically switch to French", inject MatDatepickerIntlFr instead

Community contributions are welcome :).

If your code only needs french and doesn't need English, you can provide MatDatepickerIntlFr in your code. there would be no need to change it dynmically. The code would look something like:

provide: MatDatepickerIntl, useClass: MatDatepickerIntlFr

I believe this should be doable with a factory provider. Provide the locale as a dependency to the factory provider. The factory returns an instance of either MatDatepickerIntl or MatDatepickerIntlFr depending on what the locale is.

I will try solve.

Hey @maykonpacheco, are you still working on that issue?

@GKosheev yes, do you have any suggestion?

Talked though this with @amysorto , will be improving the example.

Just an update on this, seems like there needs to be changes done on the to the datepicker-base.ts file. When locale updates happen, the class does not re-evaluate the value of the close calendar button. I think moving the initialization of the _closeButtonText value from the constructor to ngOnInit would solve this issue since it would reevaluate every time the calendar content is rendered. But maybe we could listen in to the intl.changes observable and evaluate those values when that emits.

You can do intl.changes.next() after changing the value of the close button text so that the service knows something needs to be updated (MatDatepickerIntl docs).

Is this issue still open? I would like to work on this.

Hello @Gua00va ,

I believe this issue is still open, and you are welcome to work on it.

-Zach

I believe this issue is still open, and you are welcome to work on it.

i want to work on this issues please assign me issue

function setCloseButtonLocale(locale) {
const closeButton = document.querySelector('.close-button');

switch (locale) {
case 'en-US':
closeButton.innerText = 'Close calendar';
break;
case 'fr-FR':
closeButton.innerText = 'Fermer le calendrier';
break;
// add additional cases for other supported locales
default:
closeButton.innerText = 'Close calendar';
}
}
you are using this code

@piyushsrvastava, I wanted to bring to your attention that a pull request has already been submitted. #26738

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}