怎么在Vue中利用Vant實現(xiàn)一個時間選擇器？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)服務(wù)項目包括通渭網(wǎng)站建設(shè)、通渭網(wǎng)站制作、通渭網(wǎng)頁制作以及通渭網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，通渭網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到通渭省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

1.查看Vant官網(wǎng)https://youzan.github.io/vant/#/zh-CN/datetime-picker

引入Vant中DatetimePicker組件（全局引入后可直接使用）

import Vue from 'vue';
import { DatetimePicker } from 'vant'
Vue.use(DatetimePicker);

關(guān)鍵使用代碼（結(jié)合vant組件Popup的底部彈出層一起使用）

   
  

export default {
 data() {
  return {
   dateShow: false,
   currentDate: new Date()
  };
 }
}

效果圖

實現(xiàn)點擊確定 和取消的方法

handleCancel () {
   this.dateShow = false;
  },
  //開始時間
  handleEndDateConfirm () {
   this.dateShow = false;
   this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
  },

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

本文題目：怎么在Vue中利用Vant實現(xiàn)一個時間選擇器-創(chuàng)新互聯(lián)
文章位置：http://weahome.cn/article/ceschd.html