How to set the first day of the week ?

@vincent15000 sadly it requires that someone uses that exact vue extension and that they needed to change the start of the week. If you are able to make a simple js fiddle with the problem I will gladly take a look

@Sinnbeck Ok thank you, I'll have a look to create a jsfiddle, never done again.

@vincent15000 I sadly never used vue. But you can most likely load it via cdn (left panel).

@Sinnbeck Good idea thank you.

@Sinnbeck Here it is ;).

https://jsfiddle.net/VincentDevWeb/gj7dzvpm/15/

@rodrigo.pedra Thank you very much.

Where did you find the syntax to write this ?

ElementPlus.dayjs().$locale().weekStart = 1;

Have you found some documentation ?

@rodrigo.pedra I don't have it work with InertiaJS.

import './bootstrap';

// InertiaJS
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

// Fontawesome
import { library } from "@fortawesome/fontawesome-svg-core"
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
import { fas } from "@fortawesome/free-solid-svg-icons"
library.add(fas)

// Default layout
import GuestLayout from './Pages/Layouts/GuestLayout.vue'
import UserLayout from './Pages/Layouts/UserLayout.vue'

// Element-plus
import ElementPlus from 'element-plus'
import fr from 'element-plus/es/locale/lang/fr'

// Common styles
import '../sass/app.scss'

// InertiaJS
createInertiaApp({
  resolve: (name) => {
    const page = resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob("./Pages/**/*.vue")
    );

    page.then((module) => {
      if (name.startsWith('Guest/')) {
        module.default.layout = module.default.layout || GuestLayout
      }
      if (name.startsWith('User/')) {
        module.default.layout = module.default.layout || UserLayout
      }
    });

    return page;
  },
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
      .component("font-awesome-icon", FontAwesomeIcon)
      .use(plugin)
      .use(ElementPlus, {
        locale: fr,
      })
      .mount(el)
  },
});

@vincent15000

Have you found some documentation ?

First I went to the docs and found this:

https://element-plus.org/en-US/component/date-picker.html#localization

Which stated:

The default locale of is English, if you need to use other languages, please check Internationalization

Note, date time locale (month name, first day of the week ...) are also configured in localization.

Going to the Internationalization wasn't very helpful, so I went to the code:

https://github.com/element-plus/element-plus/blob/1ec498c732e8cdf9f67079a12954880c88859ade/packages/components/date-picker/src/date-picker-com/basic-date-table.vue#L77

And voilà

@vincent15000

I don't have it work with InertiaJS.

I can't find the line you even tried to make it work... maybe you tried in another file?

@vincent15000

From my understanding you need to write the line you already identified:

ElementPlus.dayjs().$locale().weekStart = 1;

Anywhere before telling Vue to .use(ElementPlus)

@rodrigo.pedra I have added this line.

import ElementPlus from 'element-plus'
import fr from 'element-plus/es/locale/lang/fr'
// this line
ElementPlus.dayjs().$locale().weekStart = 1

And I get this error.

Uncaught TypeError: ElementPlus.dayjs is not a function

@rodrigo.pedra Yes I also already had a look at the internationalization with the same opinion as you.

@vincent15000

And, how are you even trying to debug it?

Have you tried doing:

console.log(ElementPlus.dayjs)

To see if the property is even defined? Maybe when using ES modules it is a plain property and not a function.

Or maybe it is not even defined when using ES modules, and you'll need to search the docs to find out how to set its dayjs property.

I found out it was a function, in the fiddle environment, by console.log()'ing it.

I don't use this library at all, I expected that showing you the direction would already help you out.

@vincent15000 suggestion

import dayjs from 'dayjs'

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

Based on https://stackoverflow.com/a/72121426

@rodrigo.pedra Yes I have done a console log with ElementPlus and the property isn't defined.

Yes you have helped me ;) ... sure. I have the right direction, but I need now to adapt it to my code.

@Sinnbeck Not working at all.

@vincent15000 oh so no default export from dayjs

Did you try console.log as suggested?

@Sinnbeck console.log(fr) shows that fr only contains the translations.

@vincent15000 hmm so the docs are wrong? There is an example on the dayjs site https://day.js.org/docs/en/customization/customization

Did you try it still?

@Sinnbeck

{name: 'fr', el: {…}}
el
: 
cascader
: 
{noMatch: 'Aucune correspondance', loading: 'Chargement', placeholder: 'Choisir', noData: 'Aucune donnée'}
colorpicker
: 
{confirm: 'OK', clear: 'Effacer', defaultLabel: 'color picker', description: 'La couleur actuelle est {color}. Appuyer sur Entrée pour sélectionner une nouvelle couleur.'}
datepicker
: 
{now: 'Maintenant', today: 'Auj.', cancel: 'Annuler', clear: 'Effacer', confirm: 'OK', …}
dialog
: 
{close: 'Fermer la boîte de dialogue'}
drawer
: 
{close: 'Fermer la boîte de dialogue'}
image
: 
{error: 'ECHEC'}
inputNumber
: 
{decrease: 'décrémenter', increase: 'incrémenter'}
messagebox
: 
{title: 'Message', confirm: 'Confirmer', cancel: 'Annuler', error: 'Erreur', close: 'Fermer la boîte de dialogue'}
pageHeader
: 
{title: 'Retour'}
pagination
: 
{goto: 'Aller à', pagesize: '/page', total: 'Total {total}', pageClassifier: '', deprecationWarning: 'Utilisations obsolètes détectées, veuillez vous ré… documentation el-pagination pour plus de détails'}
popconfirm
: 
{confirmButtonText: 'Oui', cancelButtonText: 'Non'}
select
: 
{loading: 'Chargement', noMatch: 'Aucune correspondance', noData: 'Aucune donnée', placeholder: 'Choisir'}
slider
: 
{defaultLabel: 'curseur entre {min} et {max}', defaultRangeStartLabel: 'choisir la valeur de départ', defaultRangeEndLabel: 'sélectionner la valeur finale'}
table
: 
{emptyText: 'Aucune donnée', confirmFilter: 'Confirmer', resetFilter: 'Réinitialiser', clearFilter: 'Tous', sumText: 'Somme'}
transfer
: 
{noMatch: 'Aucune correspondance', noData: 'Aucune donnée', titles: Array(2), filterPlaceholder: 'Entrer un mot clef', noCheckedFormat: '{total} elements', …}
tree
: 
{emptyText: 'Aucune donnée'}
upload
: 
{deleteTip: 'Cliquer sur supprimer pour retirer le fichier', delete: 'Supprimer', preview: 'Aperçu', continue: 'Continuer'}
[[Prototype]]
: 
Object
name
: 
"fr"
[[Prototype]]
: 
Object

@Sinnbeck Sure I tried it ... even if I add fr.weekStart = 1, it doesn't work.

@vincent15000 ok. Seems the docs are a bit lacking. You probably need to configure dayjs directly as @rodrigo.pedra explained

@Sinnbeck @rodrigo.pedra That's very very strange.

From this page ...

https://stackoverflow.com/a/72121426

I went to this page ...

https://stackblitz.com/edit/vue3-element-plus-first-day-of-week-msa3wn?file=src%2Fmain.js

And I solved my problem like this.

import dayjs from 'dayjs'
dayjs.Ls.en.weekStart = 1

I don't undertstand why setting the english week start solved my problem for the french week start.

But it works.

Thank you both @sinnbeck and @rodrigo.pedra.

I don't know who can receive the best answer because you both helped me very much.