You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Element-UI DatePicker周起始设置:如何将周日改为周一?

如何将Element-UI DatePicker的周起始日设为周一?

嗨,我之前也遇到过这个问题!其实Element-UI的DatePicker是支持设置周起始日为周一的,只是这个配置项可能藏得有点深,我来给你捋两种实用的实现方式:

1. 针对单个组件直接配置

你可以通过组件的 picker-options 属性,设置 firstDayOfWeek 参数指定周起始日。其中 1 代表周一(0 是默认的周日,参数范围0-6对应周日到周六)。

示例代码:

<el-date-picker
  v-model="selectedWeek"
  type="week"
  format="yyyy 第 WW 周"
  value-format="yyyy-MM-dd"
  :picker-options="{ firstDayOfWeek: 1 }"
  placeholder="选择周">
</el-date-picker>

设置后打开日期选择器,周的第一列就会显示周一,选中的周范围也会从周一开始计算。

2. 全局配置所有DatePicker

如果希望项目里所有DatePicker都默认用周一作为周起始日,可以在Element-UI全局初始化时统一配置:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI, {
  // 全局设置日期选择器的周起始规则
  pickerOptions: {
    firstDayOfWeek: 1
  }
})

这样所有DatePicker组件都会自动应用这个配置,不用每个组件单独重复设置。

另外补充:Element-UI默认依赖moment.js处理日期,你也可以通过修改moment的全局locale配置实现相同效果,但上面的picker-options配置更直接针对Element组件,推荐优先使用。

内容的提问来源于stack exchange,提问作者Perp

火山引擎 最新活动