关于vue3 + Vant4 组件库 日期选择器中参数的格式化

伙伴匹配系统用到了vue3 + Vant4 组件库,在做创建队伍表单的编辑页,引入了Vant4组件库中的

DatePick日期选择,如下:

关于vue3 + Vant4 组件库 日期选择器中参数的格式化_第1张图片

过期时间 右侧的时间 定义变量为  addTeamData.expireTime(参数)

['xxxx', 'xx', 'xx']默认的格式!(字符串数组表示时间)

 关于vue3 + Vant4 组件库 日期选择器中参数的格式化_第2张图片

点击事件--->赋值-->格式化字符串数组

['2023','08','13'] ----> [2023-08-13]

const onConfirm = ({selectedValues}) => {
addTeamData.value.expireTime = selectedValues.join('-');
showPicker.value=false;
}

传参的时候格式化 [2023-08-13]参数

//提交
const onSubmit = async () => {

  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status),
    expireTime : moment(addTeamData.value.expireTime).format("YYYY-MM-DD HH:mm:ss")
  }
  //todo 前端数据校验
  const res = await myAxious.post("/team/add",postData);
  if (res?.code === 0 && res.data){
    Toast.success("添加成功");
    router.push({
      path:'/team',
      replace:true,
    });
  }else {
    Toast.fail("添加失败")
  }
}

后端 yml文件

spring:
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: Asia/Shanghai

-----------------------------------------------------结果----------------------------------------------------------------------

关于vue3 + Vant4 组件库 日期选择器中参数的格式化_第3张图片

 

你可能感兴趣的:(前端,vue.js,javascript)