效果演示：

代碼

<template><div> <!-- 輸入框形式--><van-fieldreadonlyclickablename="calendar":value="timeValue"label="日期選擇："placeholder="發(fā)生事故的時(shí)間點(diǎn)"@click="showPopFn()"/><br/><br/><!-- 按鈕框形式--><van-button plain type="primary" @click="showPopFn()">點(diǎn)擊選擇日期</van-button><van-field v-model="timeValue" placeholder="選擇的日期結(jié)果" 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><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() { // 值變化是觸發(fā)this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)},confirmFn() { // 確定按鈕this.timeValue = this.timeFormat(this.currentDate);this.show = false;},cancelFn(){this.show = true;},timeFormat(time) { // 時(shí)間格式化 2019-09-08let 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里面引入相應(yīng)的文件奧。

// 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);

總結(jié)

以上是生活随笔為你收集整理的使用Vant完成DatetimePicker 日期的选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。