2

I'm looking for a way to translate the placeholder for a date picker in the input as soon as the user changes the language. For example, the default (EN) format is dd/mm/yyyy, but if the user changes the language to french, this should be changed to jj/mm/aaaa. Currently I'm using the momentJS library but unfortunately, this doesn't support date translation, only the correct local format. Is there a library/other way suitable for this? Thank you

Lori
  • 182
  • 1
  • 3
  • 12
  • Hey, unfortunately not. I see that it transforms the date format based on the selected locale, however, this already worked in my case. As I said, what didn't work is translating the placeholder (using the initials from that language instead of d,m,y initials). I further dug into this but unfortunately, there isn't a way to do this, only manually. – Lori Dec 09 '22 at 07:56
  • I'm having the exact same problem as yours, I posted a question about it yesterday. If I have answers, I'll keep you posted. https://stackoverflow.com/questions/74754040/how-do-i-get-the-localized-date-format-for-a-given-locale – Backslash36 Dec 11 '22 at 08:48
  • @Lori check my answer and let me know how it works or if you need any help to use it – Tohirul Islam Dec 11 '22 at 16:11
  • @TohirulIslam I can't see how this helps translating the placeholder unfortunately – Lori Dec 12 '22 at 07:12

4 Answers4

1

Using the default <input type="date">, the browser UI element is rendered. This is not something that you can directly control. You can add a helper for the browser to display a specific lang, eg <input type="date" lang="en-GB">, as this is a global attribute. That being said, the browsers will implement this differently, and I believe that as it currently stands, most browsers ignore this attribute and instead use the locale currently set by on the browser eg, Intl.DateTimeFormat().resolvedOptions().locale.

Eg:

<label for="datepicker">Select Date:</label>
<input type="date" id="datepicker" lang="fr-CA">

For me (using Chrome), this stays as my current locale (en-GB).

What can I do?

You cannot override your browser locale my javascript, it must be set through the browser config (eg, chrome://settings/languages) or through browser launch settings.

The easiest way to do this effectively would be to use a non browser UI date picker, eg, something like jQuery datepicker:

$(function() {
  $("#datepicker").attr('placeholder', $.datepicker.regional["fr"].dateFormat)
  
  $("#datepicker").datepicker($.datepicker.regional["fr"]);
  
  $("#locale").on("change", function() {
    const locale = $.datepicker.regional[$(this).val()]
    $("#datepicker").attr('placeholder', locale.dateFormat)
    $("#datepicker").datepicker("option", locale);
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-ar.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-fr.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-he.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-zh-TW.js"></script>


<p>Date: <input type="text" id="datepicker">&#xA0;
  <select id="locale">
    <option value="ar">Arabic (&#x202B;(&#x627;&#x644;&#x639;&#x631;&#x628;&#x64A;&#x629;</option>
    <option value="zh-TW">Chinese Traditional (&#x7E41;&#x9AD4;&#x4E2D;&#x6587;)</option>
    <option value>English</option>
    <option value="fr" selected="selected">French (Fran&#xE7;ais)</option>
    <option value="he">Hebrew (&#x202B;(&#x5E2;&#x5D1;&#x5E8;&#x5D9;&#x5EA;</option>
  </select>
</p>

But even this is not perfect. I'm sure that are a lot better date pickers out there.

dangarfield
  • 2,210
  • 1
  • 13
  • 18
  • Hi. Thank you for your answer. However, I can't figure out how can I translate a placeholder using these options. Please note that momentJS does the formatting of the date correctly, I just need a way to translate the placeholder of the input field before the user selects the date. For example, if the user has the french language set, the placeholder would be jj/mm/aaaa. Is there an API or any other way to do this? Unfortunately, with Intl.DateTimeFormat I didn't find a way to do this. Thanks – Lori Dec 06 '22 at 07:59
  • Ah, I'm with you now. Yes, I'll update the post because I answered a very different question – dangarfield Dec 06 '22 at 09:10
0

I'm having the exact same problem as you (see How do I get the localized date format for a given locale?).

I have yet to find a library that features date placeholder mappings as part of their locale data. As of now, I need to maintain a mapping for the languages I support in my application.

const datePlaceholderLocaleData = {
  fr: { year: 'a', month: 'm', day: 'j' },
  en: { year: 'y', month: 'm', day: 'd' }
}

I'll keep you informed if I find a better solution.

Backslash36
  • 755
  • 1
  • 13
  • 28
0

Try this Javascript snippet I left the part of language code change but I am pretty sure it will help however you set the langCode. I tried several langCode all of them worked.

const langcodes = ["es", "ca", "en" ,"nl", "fr", "de"];

Use this Array and map over if to generate langCode for testing purposes.

const myDate = new Date();
const langCode = document.documentElement.lang || navigator.language;
console.log(langCode)
const formatter = new Intl.DateTimeFormat(langCode);
console.log(formatter.format(myDate))
Tohirul Islam
  • 334
  • 1
  • 9
-2

The toLocaleDateString() method returns a string with a language-sensitive representation of the date portion of the specified date in the user agent's timezone.

Nikhil Kumar Agarwal K
  • 1
  • 1