20

I want to change my calendar dates language English to french.

<input type="date" name="licence_date" id="licence_date" class="form-control">

enter image description here

I want to change this calendar language English to french

1
  • According to mozillas dev page (developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) there is no such tag. Since there is no tag I don't think that there is any solution using the input element to especially localize your input. But in general browsers use their selected language (most the time its also the system language) Apr 13, 2020 at 11:50

1 Answer 1

15

You can assign a language to the input date type by changing the language of the page or the item itself, as documented on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#Localization

<label for="licence_date">Licence Date</label>
<input type="date" name="licence_date" id="licence_date" lang="fr-CA">

However, that will not change the display language of the calendar shown, because that calendar element is a browser UI element, and the overwhelming majority of browsers only natively display one language at a time. Even Firefox, which supports multiple language packs, only uses the primary one chosen at any one time, and it's that UI language which it will show the input date picker with.

The good news is that your users will already see the date picker in their browser's language, no matter how obscure the language.

7
  • 11
    The code snippet is displaying the information in english and not in french (at least for me)
    – Mbotet
    Sep 9, 2022 at 13:19
  • @Mbotet And your browser's UI language is French? Which browser are you using?
    – frandroid
    Sep 9, 2022 at 19:45
  • im actually using spanish from firefox DE, but tried on chrome and same. I think it only formats the numbers according to such country default. I was initially looking for translation when you open calendar and the name of the month to be translated. I ended up using jquery ui (datepicker widget) + theme (smoothness) If you want more details i can provide ;)
    – Mbotet
    Sep 11, 2022 at 9:00
  • 1
    @emre-ozgun You can't change the browser's UI. So if you want to do a different calendar picker, you need to build one in HTML/CSS or use an existing front-end component calendar picker... There should be many around, including some with configurable languages
    – frandroid
    Jan 10 at 17:26
  • 1
    @efotinis Indeed. But my answer is about calendar display in a webpage as per the browser, not about calendar display as per the operating system. If you want Firefox to use your system localization (which would then bubble up to the webpage display), there's an option for that: superuser.com/a/1804828/292114
    – frandroid
    Nov 8 at 21:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.