移动端vue+vant4选择日期+时间，返回结果是：2024-07-23 10:27格式

本文主要是介绍移动端vue+vant4选择日期+时间，返回结果是：2024-07-23 10:27格式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

环境：vue3、 vant4、vite

<van-popup v-model:show="showPicker" round position="bottom"><van-picker-grouptitle="预约日期":tabs="['选择日期', '选择时间']"next-step-text="下一步"@confirm="onConfirm"@cancel="showPicker = false"><van-date-pickerv-model="currentDate":min-date="minDate":max-date="maxDate":formatter="formatter"/><van-time-pickerv-model="currentTime":formatter="formatter":min-hour="minHour":min-minute="minMinute"/></van-picker-group>
</van-popup>


const formatter = (type, option) => {if (type === 'year') {option.text += '年'}if (type === 'month') {option.text += '月'}if (type === 'day') {option.text += '日'}if (type === 'minute') {option.text += '分'}if (type === 'hour') {option.text += '时'}return option
}


data() {return {showPicker: false,currentDate: [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()],currentTime: [new Date().getHours(), new Date().getMinutes()],minDate: new Date(),maxDate: new Date(new Date().getFullYear() + 10, new Date().getMonth(), new Date().getDate()),minHour: new Date().getHours(),minMinute: new Date().getMinutes(),columnsType: ['year', 'month', 'day'],formatter,}
}

onConfirm() {this.showPicker = falsethis.formData.startTime = `${this.currentDate[0]}-${this.currentDate[1]}-${this.currentDate[2]} ${this.currentTime[0]}:${this.currentTime[1]}`
},