Uppercasing monthnames in momentjs

Question

I changed moments locale by setting the following property:

moment.locale(chosenLocale);

Everything seems to work fine. I get the month names and the weekday names according to the selected locale. I also get correct calculation of weeknumber etc.

With default (english) locale i get month names like January, February, etc. I also get weekday names like Monday, Tuesday, etc. For some reason, with danish locale i get all these names lowercased. When formatting a simple weekday, i can just capitalize the first letter but for some more advanced formats where the name might swap order (January 1st vs. 1. Januar) i can't just uppercase the first letter.

I'm using this format to display the month name and day of month:

moment().format('dddd LL')

In danish i get 7. marts 2016 but i really want 7. Marts 2016. Keep in mind, i need the solution to work on all locales, so i can't hardcode the month names - or can I? I tried the following:

moment.locale(chosenLocale);
var __months = moment.months().map(function (m) { return m.toUpperCase() + "TEST"; });
moment.locale(chosenLocale, {
    months : __months
}); 

I would expect (for testing purposes) to get JANUARTEST for danish locale, but i get januartest which hints that the lower case is applied by the framework somewhere else. I also tried to set the months property to a function according the the api docs and then return the uppercase value of the cached month array, which same result as described.

Does anyone have a solution to this?

Answer 1

For some reason, with danish locale i get all these names lowercased.

There's good reason for that. In Danish, the names of the months are not capitalized. Many languages do not capitalize the names of their months or weekdays, including Spanish, French, Italian, Russian, and others.

Each locale file in moment.js is "owned" by at least one native speaker of the language. In general, you should not try to correct the capitalizations in your own code. If you feel there's an error with a particular locale, open an issue and we can get input from the locale owner.

Note, we have had a few requests for providing alternate cased versions, to be used in the exception cases of 1) the start of the sentence, or 2) when standing alone as in column headers. Whether or not to capitalize these (especially in the second case) can vary significantly between languages. As of now, moment doesn't offer any distinction, and always aims for the generic case.

That said, I tried your code against the current version (2.12.0) and it does work, so perhaps you are on an older version that handled this differently. However, I do get a deprecation warning, because you should be using the updateLocale method to modify an existing locale, so your code should be changed as follows:

moment.updateLocale(chosenLocale, { months : __months });

Still, I advise against this for the reasons explained above.

Answer 2

You can give CSS a try:

.selector .to .lowercase .element { text-transform: capitalize; }

If you have that selector, that should capitalize any string.

Answer 3

Just use .toUpperCase()

Eg:

<Text>TARGET DATE: {Moment("10-jan-20").format('DD MMMM YYYY').toUpperCase()}</Text>

That returns: "TARGET DATE: 10 JANUARY 2020"

Answer 4

I'm having the same issue in Spanish as it is reported in French by Charles Martin. Who ever has translated the Months and Days names in spanish by using all in lowercase should have opted to make the 1st letter in UpperCase like as in English.

With this fix it's relatively easy to convert all .toLowerCase() If we need it.

To convert just the 1st letter to uppercase for the week and month inside the .format('dddd, DD [de] MMMM') is not possible and to make it outside push us to use another function to split , uppercase 1st letter, and joint to process the result.

Until a fix is implemented, I will stick with the solution proposed to update the locale on the fly.

moment.locale('es');
var meses = 'Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre'.split('_');
var semanas = 'Domingo_Lunes_Martes_Miércoles_Jueves_Viernes_Sábado'.split('_');
moment.updateLocale('es', { months : meses, weekdays : semanas });

There are other things to replace if you need to. Just open the moment-with-locales.js file and search hooks.defineLocale('es' to see all the properties and use the method explained above to change those from outside the library.