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,
weekdaysMin
it 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.
weekdaysMin
Properties can have shorter abbreviated names to fit in smaller spaces.For example, if you
weekdaysMin
set 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 ofweekdays
andweekdaysShort
. If not setweekdaysMin
, dayjs will try to use it firstweekdaysShort
, if not setweekdaysShort
, it will be usedweekdays
.
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
}>
}