最近在做日程功能,用到了时间插件moment和elementUI的日历组件el-calendar
。在使用过程中,遇到一点小问题,在此记录一下。
一、moment()不规范传参
在开发中,经常会用moment()格式化时间,知道moment支持的参数类型比较多,包括日期和时间字符串、时间戳、JavaScript对象和moment对象等,一直以来使用也没有问题。
最近在开发日程功能中,需要将年、月、日三个字段手动拼接成一个时间字符串, 拼接结果如下:
time = '2024-3-1'
想着拼接的结果不符合后端时间传参“YYYY-MM-DD”的格式要求,便想着用moment()的格式化一下。
moment(time).format('YYYY-MM-DD')
结果控制台出现如下警告。
无奈,只得手动将小于10的月、日前补0如2024-03-01
,补0后再moment()格式化,就没有上述警告了。
二、calendar绑定值不规范赋值
calendar组件是第一次用。
需求中要求点击日期单元格请求接口获取对应日期的日程安排。calendar组件未提供点击事件,所以需要结合calendar组件自定义内容功能自定义点击事件。
然后对照着文档写下了如下代码:
<template>
<el-calendar v-model="selectDay">
<template
slot="dateCell"
slot-scope="{date, data}"
>
<div class="day-box" @click="handleDateChange(date)">
<div class="day-num">{{ moment(data.day).format('D')}}</div>
<div class="day-dot" v-if="data.type === 'current-month'"></div>
</div>
</template>
</el-calendar>
</template>
<script>
export default {
data(){
selectDay: '',
},
methods: {
handleDateChange(date) {
this.selectDay = moment(date).format('YYYY-MM-DD');
this.getScheduleList()
},
async getScheduleList() {
try {
const params = {
queryDate: moment(this.selectDay).format('YYYY-MM-DD),
};
} catch(e) {
};
},
}
}
</script>
再然后进行切换日期操作。在面板当前月的日期中来回点击没有问题,但点击面板中上一个月或下一个月的日期(如下图红框圈出来的日期)时,跳转到对应上一个或下一个月的选中日期非之前点击的日期。
经过排查,发现是在handleDateChange
事件中对组件的绑定值this.selectDay
重新赋值所致。也就是说,在日期点击事件中,不能对日期绑定值重新赋值,否则会引起选中错乱的问题。
找到原因,将代码调整:绑定值字段与接口传参字段分开。
handleDateChange(date) {
this.queryDay = moment(date).format('YYYY-MM-DD');
this.getScheduleList()
},
async getScheduleList() {
try {
const params = {
queryDate: moment(this.queryDay).format('YYYY-MM-DD),
};
} catch(e) {
};
},
为什么要加一个接口传参字段queryDay
呢?直接将绑定值selectDay
传给接口不行吗?
不行。因为handleDateChange
发生时,selectDay
的绑定值还是上一次选中的日期。
原文链接:https://juejin.cn/post/7346510261073625123 作者:HED