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




