如何在vue中使用dayjs修改日历组件的星期名称

客官°小女子只卖身不卖艺 2024-03-22 16:16 117阅读 0赞

在vue中使用日历组件Calendar时，头部的星期默认展示为\['日', '一', '二', '三', '四', '五', '六'\]，如下图所示。

![8ce0a6669e6f41188df0a485ba69848b.png][]

如何改变头部的星期展示呢，可以通过以下方法实现：

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试试。

修改的效果如下：

![f153bc5df9194498804567a2cfb4046b.png][]

> **说明：**在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
      }>
    }

--------------------

[新时代农民工][Link 1]

[8ce0a6669e6f41188df0a485ba69848b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/26de4b4bc6bc4a43acebdcc79454ccbd.png
[f153bc5df9194498804567a2cfb4046b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d954b8f690424ad2a08d3a0cdff7ff88.png
[Link 1]: https://www.sgknight.cn/