web日程功能开发问题台账!

最近在做日程功能,用到了时间插件moment和elementUI的日历组件el-calendar。在使用过程中,遇到一点小问题,在此记录一下。

一、moment()不规范传参

在开发中,经常会用moment()格式化时间,知道moment支持的参数类型比较多,包括日期和时间字符串、时间戳、JavaScript对象和moment对象等,一直以来使用也没有问题。

最近在开发日程功能中,需要将年、月、日三个字段手动拼接成一个时间字符串, 拼接结果如下:

js 复制代码
time = '2024-3-1'

想着拼接的结果不符合后端时间传参"YYYY-MM-DD"的格式要求,便想着用moment()的格式化一下。

js 复制代码
moment(time).format('YYYY-MM-DD')

结果控制台出现如下警告。

无奈,只得手动将小于10的月、日前补0如2024-03-01,补0后再moment()格式化,就没有上述警告了。

二、calendar绑定值不规范赋值

calendar组件是第一次用。

需求中要求点击日期单元格请求接口获取对应日期的日程安排。calendar组件未提供点击事件,所以需要结合calendar组件自定义内容功能自定义点击事件。

然后对照着文档写下了如下代码:

js 复制代码
<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重新赋值所致。也就是说,在日期点击事件中,不能对日期绑定值重新赋值,否则会引起选中错乱的问题。

找到原因,将代码调整:绑定值字段与接口传参字段分开。

js 复制代码
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的绑定值还是上一次选中的日期。

相关推荐
你挚爱的强哥4 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
天天进步20157 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript