how to get locale dynamically from dayjs https://www.npmjs.com/package/dayjs?

Question

When I use like dayjs(date).locale('te').format('YYYY MMM DD'), then I get Month value in english. For working with locale, I have to import locale.

import * as locale from 'dayjs/locale/te';

The problem is that I don't see a way to dynamically import a locale. I don't have access to nodejs require() function. I have react based application. How to mitigate this issue?

if you need to use require in browser you need to use browserify — Learner, Jan 06 '20 at 09:26
so what is your expected output, What are you trying to achieve can you explain more — Learner, Jan 06 '20 at 09:27
I need month translated to the locale language. For which i need conditional loading of a locale. — mayank goyal, Jan 06 '20 at 09:37

gernsdorfer · Answer 1 · 2021-02-05T09:23:59.650

7

A workaround for dynamic Imports without errors:

const locales = {
  de: () => import('dayjs/locale/de'),
  en: () => import('dayjs/locale/en'),
}

function loadLocale (language) {
  locales[language]().then(() => dayjs.locale(language))
}

edited Feb 05 '21 at 09:23

answered Feb 05 '21 at 09:05

gernsdorfer

71
1
2

goog solution, since I don't want to copy all of the locales chunks into my build folder – Scofield Dec 30 '21 at 18:33
Hello, I like your answer. I have an issue about locales not being a function. Also I use typescript. Do you know why ? – Jonathan Aurry Jan 13 '22 at 11:41

score 6 · Answer 2 · answered Nov 03 '20 at 07:03

6

You can use import as import expression and dynamically import whatever you want. for example:

import dayjs from "dayjs";
import localeData from "dayjs/plugin/localeData";
dayjs.extend(localeData);

const LOCALE = "de";

import(`dayjs/locale/${LOCALE}`)
.then(() => {
  dayjs.locale(LOCALE);
  console.log(dayjs.weekdays());
});

You can see a working example in this codesandbox.

for more information on dynamic imports I suggest you to read https://javascript.info/modules-dynamic-imports

answered Nov 03 '20 at 07:03

Roy Hershkovitz

61
1
3

3

Neat solution! But it might be better to add `.js` into the import statement as it might provoke compile errors if used in webpack without typescript configuration: import(`dayjs/locale/${LOCALE}.js`) – Hexodus Sep 23 '21 at 15:00
@Hexodus for me the `.js` was the crucial bit for my typescript app. – munsu Jul 18 '23 at 08:30

score 2 · Answer 3 · answered Jan 06 '20 at 09:40

2

You need to first import needed locale files as below

import 'dayjs/locale/te'
import 'dayjs/locale/en'

Then you can switch between locals dynamically as below operations

dayjs().locale('en').format()
dayjs('2018-4-28', { locale: 'te' })

answered Jan 06 '20 at 09:40

Dipten

1,031
8
16

2

But that will pull un-necessary code. I have to do import conditionally. – mayank goyal Jan 06 '20 at 09:53
It seems no way for conditional import. – Dipten Jan 06 '20 at 10:01
This answer is non relevant, it does not address the question regarding dynamic importing. – bullettrain Mar 31 '22 at 07:18

score 0 · Answer 4 · answered Oct 21 '20 at 11:06

0

One thing you could do if you don't mind adding a promise there is to dynamically import the locale you need. The code would look like this:

const convertToLocale = (date, locale) => {
  return import(`dayjs/locale/${locale}`)
    .then(() => dayjs(date).locale(locale));
}

This will load all locale files as the import you mentioned would without the need to add the import statements by hand.

answered Oct 21 '20 at 11:06

Efstathios Oikonomou

349
7
21

@ Efstathios Oikonomou it is not working. Dynamic import it gives an error – Shardul Pendse Oct 27 '20 at 11:39

Deep · Answer 5 · 2020-10-28T08:42:20.343

0

Try this code.

const language = {
    en: import('dayjs/locale/en'),
    te: import('dayjs/locale/te')
}

language['te'].then(lng => { console.log((dayjs(new Date()).locale(lng.name).format('YYYY MMMM DD')))})

edited Oct 28 '20 at 08:42

answered Oct 28 '20 at 08:36

Deep

525
3
8

how to get locale dynamically from dayjs https://www.npmjs.com/package/dayjs?

5 Answers5

Linked