快捷導(dǎo)航

Vue使用vant實現(xiàn)日期選擇器功能

更新時間：2024年08月09日 09:00:09 作者：小蹦跶兒

在當(dāng)今前端開發(fā)的領(lǐng)域中,Vue 框架因其高效和靈活的特性備受開發(fā)者青睞,而 Vant 是一個輕量的移動端組件庫,為 Vue 應(yīng)用的開發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過 Vant 來實現(xiàn)日期選擇器的使用,需要的朋友可以參考下

前言

在當(dāng)今前端開發(fā)的領(lǐng)域中，Vue 框架因其高效和靈活的特性備受開發(fā)者青睞。而 Vant 是一個輕量的移動端組件庫，為 ???????Vue 應(yīng)用的開發(fā)提供了豐富且便捷的功能組件。在眾多的組件應(yīng)用中，日期選擇器又是一個常見且重要的需求。

本文將就如何在 Vue 框架中通過 Vant 來實現(xiàn)日期選擇器的使用。

一、實現(xiàn)的效果

二、實現(xiàn)方案

可參考vant官網(wǎng)。

注：使用前要注意項目是 Vue2 還是 Vue3 ，所用到的Vant版本是不一樣的！

由于我的項目是Vue2的，所以本文用的Vant版本是Vant2。

在現(xiàn)有項目中使用 Vant 時，可以通過 npm 或 yarn 進行安裝：

// Vue 3 項目，安裝最新版 Vant：
npm i vant -S

// Vue 2 項目，安裝 Vant 2：
npm i vant@latest-v2 -S

我這邊的項目比較小，暫時用到幾個組件，所以用了按需引入的方式：

首先在src文件下新建plugins文件，里面新建vant.js，如下圖：

import Vue from 'vue'
import {List, Uploader, Toast, Popup, DatetimePicker} from 'vant'

const uses = [List, Uploader, Toast, Popup, DatetimePicker]

uses.forEach(use => {
  Vue.use(use)
})

然后在main.js中引入此文件，如下圖：

完成這兩步操作之后，后續(xù)在頁面里就能夠正常加以使用了。

在使用日期選擇器的時候，結(jié)合了彈出層一起使用：

用彈出層將日期選擇器包起來。

彈出層設(shè)置了 底部彈出、圓角彈窗、40%的高度，這些屬性都可以根據(jù)自己項目實際情況進行調(diào)整.

<van-popup v-model="show" position="bottom" round :style="{ height: '40%' }">
    <van-datetime-picker
      v-model="currentDate"
      type="date"
      title="請選擇日期"
      :formatter="formatter"
      @change="change"
      @confirm="confirm"
      @cancel="cancel"
      safe-area-inset-bottom
    />
</van-popup>

DatetimePicker 通過 type 屬性來定義需要選擇的時間類型，type 為 date 表示選擇年月日。
在默認的日期選擇器中，數(shù)字的后面是不帶“年月日”這幾個字的：

如果想要實現(xiàn)效果圖中帶“年月日”字樣的，則需要加上formatter屬性即可：

    formatter(type, val) {
      if (type === 'year') {
        return val + '年';
      }
      if (type === 'month') {
        return val + '月';
      }
      if (type === 'day') {
        return val + '日';
      }
      return val;
    },

如果想要日期選擇器彈出來的時候，默認是當(dāng)天的日期：

// 在data中設(shè)置即可
currentDate: new Date(),

另外可以通過 min-date 和 max-date 屬性可以確定可選的時間范圍，不過我這邊沒有用到此屬性，用的時候可參考文檔進行設(shè)置即可。
日期選擇器總共三個事件，需要哪個直接用即可：

    change(val) {
      console.log(val, 'val')
    },
    confirm() {
      this.dateValue = this.timeFormat(this.currentDate);
      console.log(this.dateValue, 'dateValue')
      this.cancel();
    },
    cancel() {
      this.show = false;
    },

如果想在點擊日期選擇器的“完成”按鈕時，讓時間顯示成 **** 年 * 月 * 日 的格式，需要單獨寫一個格式化時間的方法，在confirm事件中調(diào)用即可：

    timeFormat(time) { // 時間格式化 ****年*月*日
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + '年' + month + '月' + day + '日';
    },

這樣選擇完時間后，顯示出來的就是下圖這種：