跳至主要內容

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;

方法使用

展示效果:

image.png|550
image.png|550
<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')
	},
}
上次编辑于:
贡献者: wenleiwang
评论
  • 按正序
  • 按倒序
  • 按热度