How to use dayjs in vue to modify the week name of the calendar component

        When using the calendar component Calendar in vue, the week of the head is displayed as ['day', 'one', 'two', 'three', 'four', 'five', 'six'] by default, as shown in the figure below .

 How to change the week display in the header can be achieved by the following methods:

const weekdaysShort = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
dayjs.locale({
  ...dayjs.Ls['zh-cn'],    
  weekdaysMin: weekdaysShort,
}, undefined, true);

1. Use the dayjs.locale method to set the date configuration parameters.

2. dayjs.Ls['zh-cn'] is used to obtain the default Chinese configuration.

3. By deconstructing dayjs.Ls['zh-cn'], set the value of weekdaysMin separately.

4. The third parameter is used to force the setting to take effect. If the setting has no effect, you can set it to true and try.

The effect of the modification is as follows:

Description: In dayjs, weekdaysMinit is an optional language configuration option used to set the abbreviated name of the week. It can be an array of strings representing the abbreviated names of the seven days of the week, for example: ['day', 'one', 'two', 'three', 'four', 'five', 'six'].

These abbreviated names are often used in controls such as calendars or date pickers to display all days of the week in a limited space. weekdaysMinProperties can have shorter abbreviated names to fit in smaller spaces.

For example, if you weekdaysMinset to the example array above, the calendar titles for each week in the calendar or datepicker would be displayed as "Day", "Monday", "Tuesday", etc.

It should be noted that if you set it weekdaysMin, dayjs will use it first instead of weekdaysand weekdaysShort. If not set weekdaysMin, dayjs will try to use it first weekdaysShort, if not set weekdaysShort, it will be used weekdays.

 The parameters can be set through dayjs.locale as follows:

{
  name: string
  weekdays?: string[]
  months?: string[]
  weekStart?: number
  weekdaysShort?: string[]
  monthsShort?: string[]
  weekdaysMin?: string[]
  ordinal?: (n: number) => number | string
  formats: Partial<{
    LT: string
    LTS: string
    L: string
    LL: string
    LLL: string
    LLLL: string
  }>
  relativeTime: Partial<{
    future: string
    past: string
    s: string
    m: string
    mm: string
    h: string
    hh: string
    d: string
    dd: string
    M: string
    MM: string
    y: string
    yy: string
  }>
}

New Era Migrant Workers

Guess you like

Origin blog.csdn.net/sg_knight/article/details/130659350