如何在vue中使用dayjs修改日历组件的星期名称
阿里云国际版折扣https://www.yundadi.com |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
在vue中使用日历组件Calendar时头部的星期默认展示为['日', '一', '二', '三', '四', '五', '六']如下图所示。
如何改变头部的星期展示呢可以通过以下方法实现
const weekdaysShort = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
dayjs.locale({
...dayjs.Ls['zh-cn'],
weekdaysMin: weekdaysShort,
}, undefined, true);
1、使用dayjs.locale方法来设置日期的配置参数。
2、dayjs.Ls['zh-cn']用了获取默认的中文配置。
3、通过解构dayjs.Ls['zh-cn'] 在单独设置weekdaysMin的值。
4、第三个参数用于使设置强制生效如果设置无效果的时候可以设置为true试试。
修改的效果如下
说明在dayjs中
weekdaysMin
是一个可选的语言配置选项用于设置每周的缩写名称。它可以是一个字符串数组表示一周七天的缩写名称例如['日', '一', '二', '三', '四', '五', '六']。这些缩写名称通常用于日历或日期选择器等控件中以便在有限的空间内显示每周的所有天数。
weekdaysMin
属性可以设置较短的缩写名称以适应更小的空间。例如如果您将
weekdaysMin
设置为上面的示例数组则日历或日期选择器中每个星期的日历标题将显示为“日”“一”“二”等。需要注意的是如果您设置了
weekdaysMin
则dayjs会优先使用它来代替weekdays
和weekdaysShort
。如果未设置weekdaysMin
则dayjs会先尝试使用weekdaysShort
如果没有设置weekdaysShort
则使用weekdays
。
通过dayjs.locale可以设置参数如下
{
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
}>
}