Configure el-date-picker

Question

Does someone know, how to configure a el-date-picker in element-plus to set the first day of week.

The docs say it configurable via day.js but not to use configure day.js in element.

I have done this so far.

import de from 'element-plus/es/locale/lang/de';

const i18n = createI18n({
    legacy: false,
    locale: 'de',
    messages: {
        'de': messagesDe
    },
    datetimeFormats: {
        'de': {
            short: {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            },
            long: {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
        }
    },
});

app.use(ElementPlus, {
   locale: de,
});
app.use(i18n);

Thank you for your help.

Answer 1

For me worked only with this configuration in main.ts:

import 'dayjs/locale/ru' // locale will imported inside dayjs.Ls(for datepicker use)
import ru from 'element-plus/lib/locale/lang/ru' // global locale for app
    
app.use(ElementPlus, { locale: ru })

Link to dayjs locale documentation

Answer 2

The workaround described in dayjs#215 also works for Element Plus.

For example, to set Monday as the first day of the week for the de locale, create a de object off of dayjs.Ls, and set weekStart=1:

// main.js
import dayjs from 'dayjs'

dayjs.Ls.de ??= {}
dayjs.Ls.de.weekStart = 1

demo