使用Vant完成DatetimePicker 日期的选择器操作

最新推荐文章于 2025-05-22 14:42:52 发布

飞啊飞我的骄傲放纵-未来全栈工程师

最新推荐文章于 2025-05-22 14:42:52 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue h5 文章标签： javascript 前端开发语言

原文链接：https://www.jb51.net/article/199501.htm

vue 同时被 2 个专栏收录

58 篇文章

订阅专栏

8 篇文章

订阅专栏

本文介绍了如何使用Vant UI库中的DateTimePicker组件实现日期选择功能，并展示了如何通过van-button和popup组件实现点击事件触发弹出日期选择器，以及如何处理选择结果和关闭弹出框的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
 <div id="date_time_picker">
 
 <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button>
 <van-field v-model="timeValue" placeholder="选择的日期结果" readonly />
 <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
 <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()" />
 </van-popup>
 
 </div>
</template>

```javascript
 
<script>
 export default {
 data() {
 return {
 msg: '',
 currentDate: new Date(),
 changeDate: new Date(),
 show: false, // 用来显示弹出层
 timeValue: ''
 }
 },
 methods: {
 showPopFn() {
 	this.show = true;
 },
 showPopup() {
 	this.show = true;
 },
 changeFn() { // 值变化是触发
 	this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
 },
 confirmFn() { // 确定按钮
 	this.timeValue = this.timeFormat(this.currentDate);
 	this.show = false;
 },
 cancelFn(){
 	this.show = true;
 },
 timeFormat(time) { // 时间格式化 2019-09-08
 let year = time.getFullYear();
 let month = time.getMonth() + 1;
 let day = time.getDate();
 	return year + '年' + month + '月' + day + '日'
 }
 },
 mounted() {
 	this.timeFormat(new Date());
 }
 }
</script>
 
<style>
</style>

注意：如果是按需引入的话，记得在main.js里面引入相应的文件奥。

// main.js文件里面的部分代码
import {Button} from 'vant'
import { DatetimePicker } from 'vant';
import { Popup } from 'vant';
import { Field } from 'vant'; 
 
Vue.use(Button)
Vue.use(DatetimePicker)
Vue.use(Popup)
Vue.use(Field);