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

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

DatePick日期选择,如下:

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

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

 

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

['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

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

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用vant4的DatePicker组件,结合vue3的响应式数据,实现一个有联动的日期选择器组。具体实现步骤如下: 1. 在vue的setup定义两个响应式的变量,分别代表开始日期和结束日期。 2. 在模板使用DatePicker组件,分别绑定开始日期和结束日期的值。 3. 在开始日期的change事件,更新结束日期的最小值为开始日期的值,确保结束日期不能早于开始日期。 4. 在结束日期的change事件,更新开始日期的最大值为结束日期的值,确保开始日期不能晚于结束日期。 代码示例: ```vue <template> <div> <van-cell title="开始日期"> <van-date-picker v-model="startDate" type="date" @change="handleStartDateChange" /> </van-cell> <van-cell title="结束日期"> <van-date-picker v-model="endDate" type="date" :min-date="startDate" @change="handleEndDateChange" /> </van-cell> </div> </template> <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ startDate: null, endDate: null }) const handleStartDateChange = (value) => { state.endDate = null // 重置结束日期 // 更新结束日期的最小值 const { minDate } = state.$refs.endDate state.$refs.endDate.updateMinDate(value || minDate) } const handleEndDateChange = (value) => { // 更新开始日期的最大值 const { maxDate } = state.$refs.startDate state.$refs.startDate.updateMaxDate(value || maxDate) } return { ...state, handleStartDateChange, handleEndDateChange } } } ``` 其,使用了refs来获取DatePicker组件的实例,从而调用updateMinDate和updateMaxDate方法来动态更新最小值和最大值。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值