本文最后更新于 2025年1月26日 凌晨
前言
Day.js是一个轻量的处理时间和日期的JavaScript库,和Moment.js的API设计保持完全一样,dayjs相比momentjs更加
轻量，所以在element-plus中的格式化时间的依赖，均采用dayjs，所以在使用element-plus的关于格式化时间的属性时，
也可以直接使用dayjs的格式化时间的方式。
date-picker的格式化时间使用
在element的date-picker组件中,其有两大属性，format与value-format，前者是显示在输入框中的格式，其作为展示作用，
后者是指定绑 定值的格式，可根据后端需要，修改为任意时间格式。其属性值都依据dayjs的format的方法传参,查看format的使
用方法可知，这里需要传入一个 字符串作为格式化时间的token[^1]
展示时间选择器中展示文字 ‘年’,’月’，’日’
dayjs的format方法也可将时间格式化成带文字的样式，使用方式是将需要保留的字符，放在[]中，原文： To escape characters,
wrap them in square brackets (e.g. [MM]).[^1],经过实践，字符串中的空格也会被保留
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<el-date-picker
v-model="time"
type="date"
format='YYYY[年] MM[月] DD[日]'
placeholder="Pick a day"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { dayjs } from 'element-plus'
const time = ref(dayjs().valueOf())
</script>
|
关于展示时间选择器中展示文字 ‘年’,’月’，’日’格式化，效果展示
date-picker选择周/月/年日期 选择周/月/年的最后一天
date-picker组件中,有type属性，可以将选择的时间点设置为周/月/年的第一天，但后端往往需要的是截至时间，这个时候，就需要将
其返回的时间进行格式化，我们借助该组件暴露的change方法，利用dayjs，对选择的时间进行拦截与重新赋值，dayjs提供了一系列获取
一个时刻所在周/月/年的最后一天的方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <template>
<div>
<el-radio-group v-model="model" @change="changeModel" style='margin-bottom:10px'>
<el-radio-button label="date">按日</el-radio-button>
<el-radio-button label="week">按周</el-radio-button>
<el-radio-button label="month">按月</el-radio-button>
</el-radio-group>
<div>
<el-date-picker
v-model="timeValue"
:type="model"
value-format="x"
:format="model === 'week'?`YYYY [第]ww[周]`:model === 'month'?`YYYY[年] MM[月]`:`YYYY-MM-DD`"
class="mr-[10px]"
@change="changeDate"
/>
</div>
</div>
<div style='margin-top:10px'>绑定的事件选择器的值 {{timeValue}};转换为日期展示为为: {{dayjs(timeValue)}} </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {dayjs} from "element-plus";
const model = ref('date')
const timeValue= ref(dayjs().valueOf()) as any
const changeDate = (value)=>{
if(model.value === 'month'){
timeValue.value = dayjs(value).endOf('month').valueOf()
}
if(model.value === 'week'){
timeValue.value = dayjs(value).endOf('week').valueOf()
}
if(model.value === 'date'){
timeValue.value = dayjs(value).valueOf()
}
}
const changeModel = ()=>{
changeDate(dayjs().valueOf())
}
</script>
|
date-picker选择周/月/年日期 选择周/月/年的最后一天，效果展示
[^1] dayjs的format方法