Dutch locale not set.

[Jeffrey-IKUU]

Describe the bug I'm trying to set the global locale to 'nl'. Every DayJS instance should have the Dutch locale, instead of the default 'en'. However, regardless of setting it, the default is still returning English:

el:  M {
  '$L': 'en',
  '$u': undefined,
  '$d': 2023-09-10T13:00:00.000Z,
  '$x': {},
  '$y': 2023,
  '$M': 8,
  '$D': 10,
  '$W': 0,
  '$H': 15,
  '$m': 0,
  '$s': 0,
  '$ms': 0
}

Expected behavior I expect $L to be 'nl', not 'en'.

Information My package.json:

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.6.7",
    "@types/node": "^18",
    "@types/rss": "^0.0.30",
    "@vite-pwa/nuxt": "0.0.7",
    "nuxt": "^3.4.3",
    "nuxt-icon": "^0.4.0",
    "prisma": "^4.14.0"
  },
  "dependencies": {
    "@nuxtjs/google-fonts": "^3.0.0",
    "@pinia/nuxt": "^0.4.9",
    "@prisma/client": "^5.0.0",
    "@sendgrid/mail": "^7.7.0",
    "@vuepic/vue-datepicker": "^6.0.2",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.9",
    "firebase": "^9.21.0",
    "firebase-admin": "^11.8.0",
    "ical-generator": "^5.0.0",
    "nuxt-snackbar": "^1.0.3",
    "pinia": "^2.0.35",
    "rss": "^1.2.2",
    "uuid": "^9.0.0",
    "vite": "^4.3.5",
    "vue-content-loading": "^1.6.0",
    "vue-dragscroll": "^4.0.5",
    "vuedraggable": "^4.1.0"
  }
}

My code:

import dayjs from "dayjs";
import "dayjs/locale/nl";

dayjs.locale("nl");
export default defineEventHandler(async (event) => {
  const body = await readBody(event);

  let response = (async (result) => {
    try {
      const datum = "2023-09-10";
      const tijd = "15:00";

      const el = dayjs(`${datum} ${tijd}`).locale("nl");
      console.log("el: ", el);

      return {
        body: JSON.stringify({
          snackbar: {
            type: "success", //success || error || warning || info
            title: "Succes",
            text: "De wijzigingen zijn opgeslagen.",
          },
        }),
      };
    } catch (error) {
      console.log(error);

      return {
        body: JSON.stringify({
          snackbar: {
            type: "error", //success || error || warning || info
            title: "---",
            text: "De wijzigingen konden niet worden opgeslagen.",
          },
        }),
      };
    }
  })();
  return response;
});

[Jeffrey-IKUU]

I think I found the solution.

When exploring the dayjs folder in node_modules, I found out that the locale method is expecting three parameters. So I changed my code to

const el = dayjs().locale("nl", {}, true);

instead of

const el = dayjs().locale("nl");

and this creates a Dutch dayjs object.

When reading the docs, only the not working version (with only 1 param) is documented. This should be updated!

[Jeffrey-IKUU]

Inside node_modules

export function locale(preset?: string | ILocale, object?: Partial<ILocale>, isLocal?: boolean): string

Question mark suggests that the params are optional, but it just doesn't do well without all 3 params.

[Jeffrey-IKUU]

So, for a full Dutch dayjs instance:

dayjs().locale("nl", { weekStart: 1 }, true)

[sapter]

I can't reproduce this.

import dayjs from "dayjs";
import "dayjs/locale/nl";

const testTime = dayjs("2023-09-19T17:57:32.841Z");

const nl = testTime.locale("nl");

  console.log({
    nl,
    en: testTime,
  });

yields:

{
nl: M2 {
  '$L': 'nl',
  '$d': new Date('2023-09-19T17:57:32.000Z'),
  '$y': 2023,
  '$M': 8,
  '$D': 19,
  '$W': 2,
  '$H': 19,
  '$m': 57,
  '$s': 32,
  '$ms': 841,
  '$x': {},
  '$isDayjsObject': true
},
en: M2 {
  '$L': 'en',
  '$d': new Date('2023-09-19T17:57:32.000Z'),
  '$y': 2023,
  '$M': 8,
  '$D': 19,
  '$W': 2,
  '$H': 19,
  '$m': 57,
  '$s': 32,
  '$ms': 841,
  '$x': {},
  '$isDayjsObject': true
}
}

As mentioned in the docs, "Changing the global locale doesn't affect existing instances." The issue you may have been having is calling dayjs.locale("nl") AFTER declaring your dayjs object.

[undermoonn]

Dayjs locale seems don't work on server side until I await locale file import in current scope. Try this

~/plugins/fix-dayjs.server.ts

export default defineNuxtPlugin({
  name: 'fix-dayjs',
  enforce: 'post',
  async setup() {
    await import('dayjs/locale/nl');
  },
});

---

or

export default defineEventHandler(async (event) => {
    await import('dayjs/locale/nl');
    // ...
})