dayjs全局引入并设置每周第一天是周一
...小于 1 分钟
dayjs全局引入并设置每周第一天是周一
在使用 element-ui 的时间的周组件时,取周一为周日。这里使用 dayjs 配合修改,但dayjs默认第一天也是周日,需要做一些配置才能使用,引入和设置如下。
引入dayjs
npm install dayjs --save
main.js 设置
import dayjs from "dayjs"
import 'dayjs/locale/zh-cn'
//全局使用dayjs
dayjs.locale("zh-cn")
Vue.prototype.$dayjs = dayjs;
方法使用
展示效果:

<el-form :model="searchData" ref="queryForm" size="small" :inline="true" v-show="showSearch" >
<el-form-item label="日期" prop="orderDate">
<el-date-picker
class="myDatep"
v-model="searchWeek"
type="week"
:format="searchWeek + ' 至 ' + weekEndDate + ' 第 WW 周'"
value-format="yyyy-MM-dd"
:clearable="false"
:editable="false"
:picker-options="{'firstDayOfWeek': 1}">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="searchForm">搜索</el-button>
</el-form-item>
</el-form>
data() {
searchWeek: '',
// 查询参数
searchData: {},
},
computed: {
weekEndDate() {
let dayjs = this.$dayjs; //不能在方法返回中直击使用this.dayjs
return dayjs(this.searchWeek).endOf('week').format('YYYY-MM-DD')
},
}
created() {
let dayjs = this.$dayjs;
this.searchWeek = dayjs().startOf('week').format('YYYY-MM-DD')
this.getList();
},
methods: {
getList() {
//
let dayjs = this.$dayjs; //不能在方法返回中直击使用this.dayjs
this.searchData.beginDate = dayjs(this.searchWeek).format('YYYY-MM-DD')
this.searchData.endDate = dayjs(this.searchWeek).add(6, 'day').format('YYYY-MM-DD')
},
}