DatePicker the week starts on Sunday in some counties the weeks starts on Monday is there a way to change this?

[kevinkiel]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.16

Environment

Vue 3.2.45

Steps to reproduce

Open the date range picker and you see the first day of the week is Sunday would be nice to make it possible to change this to Monday. In the react version this is possible. See https://ant.design/components/date-picker at the bottom.

What is expected?

dayjs.updateLocale('en-UK', {
weekStart: 1,
});

What is actually happening?

No support for updateLocale weekStart

[CCherry07]

Thank you for your issue. I'll look into it in the future.

[CCherry07]

Hello，you should do this to complete your custom dayjs functionality, import the plugin, and register the plugin.

I will update the documentation here, thanks for the issue.

import en from "dayjs/locale/en"
// ...
import updateLocale from "dayjs/plugin/updateLocale";
dayjs.extend(updateLocale);
dayjs.updateLocale("en", {
  weekStart: 1,
});

[kevinkiel]

Unfortunately that makes no difference. Sunday is still the first day of the week. Down below you see my component code.

Component (DateRange.vue)

<template>
  <a-range-picker :locale="getLocale" v-model:value="state.date" :format="dateFormat" />
</template>

<script lang="ts" setup>
import { reactive, inject, computed } from "vue";
import locale from "ant-design-vue/es/date-picker/locale/en_GB";
import localeNL from "ant-design-vue/es/date-picker/locale/nl_NL";
import localeES from "ant-design-vue/es/date-picker/locale/es_ES";
import localeFR from "ant-design-vue/es/date-picker/locale/fr_FR";
import localeDE from "ant-design-vue/es/date-picker/locale/de_DE";

// why so many?
import dayjs from "dayjs";
import advancedFormat from "dayjs/plugin/advancedFormat";
import customParseFormat from "dayjs/plugin/customParseFormat";
import localeData from "dayjs/plugin/localeData";
import weekday from "dayjs/plugin/weekday";
import weekOfYear from "dayjs/plugin/weekOfYear";
import weekYear from "dayjs/plugin/weekYear";
import updateLocale from "dayjs/plugin/updateLocale";

// This is not doing anything now?
import en from "dayjs/locale/en";

dayjs.extend(customParseFormat);
dayjs.extend(advancedFormat);
dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.extend(weekOfYear);
dayjs.extend(weekYear);
dayjs.extend(updateLocale);

dayjs.updateLocale("en", {
  weekStart: 1,
  mondayFirst: true
});

const i18n = inject("i18n");

const state = reactive<any>({
  date: []
});

const getLocale = computed(() => {
  if (i18n.chosenLocale === "nl") {
    return localeNL;
  } else if (i18n.chosenLocale === "es") {
    return localeES;
  } else if (i18n.chosenLocale === "fr") {
    return localeFR;
  } else if (i18n.chosenLocale === "de") {
    return localeDE;
  }
  return locale;
});

const dateFormat = computed(() => {
  if (i18n.chosenLocale === "nl" || i18n.chosenLocale === "es") {
    return "DD-MM-YYYY";
  }
  if (i18n.chosenLocale === "fr") {
    return "DD/MM/YYYY";
  }
  return "MM-DD-YYYY";
});
</script>

[CCherry07]

@kevinkiel

import dayjs from 'dayjs';

import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import localeNL from "ant-design-vue/es/locale/nl_NL";
import localeES from "ant-design-vue/es/locale/es_ES";
import localeFR from "ant-design-vue/es/locale/fr_FR";
import localeDE from "ant-design-vue/es/locale/de_DE";
import updateLocale from "dayjs/plugin/updateLocale";

dayjs.extend(updateLocale);

function updateLocaleWithLangs(langs: any[]) {
  langs.forEach((lang) => {
    dayjs.updateLocale(lang.locale, {
      weekStart: 1,
      mondayFirst: true,
    });
  });
}
updateLocaleWithLangs([zhCN, enUS, localeNL, localeES, localeFR, localeDE]);

[kevinkiel]

Fixed it by:
Replacing
import dayjs from 'dayjs';

For
import dayjs from "ant-design-vue/node_modules/dayjs";

mondayFirst: true can be removed also

Thanks for your help!

Working code

import dayjs from 'ant-design-vue/node_modules/dayjs';

import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import localeNL from "ant-design-vue/es/locale/nl_NL";
import localeES from "ant-design-vue/es/locale/es_ES";
import localeFR from "ant-design-vue/es/locale/fr_FR";
import localeDE from "ant-design-vue/es/locale/de_DE";
import updateLocale from "dayjs/plugin/updateLocale";

dayjs.extend(updateLocale);

function updateLocaleWithLangs(langs: any[]) {
  langs.forEach((lang) => {
    dayjs.updateLocale(lang.locale, {
      weekStart: 1
    });
  });
}
updateLocaleWithLangs([zhCN, enUS, localeNL, localeES, localeFR, localeDE]);

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.