前言：
在当今前端开发的领域中，
Vue框架因其高效和灵活的特性备受开发者青睐。而Vant是一个轻量的移动端组件库，为Vue应用的开发提供了丰富且便捷的功能组件。在众多的组件应用中，日期选择器又是一个常见且重要的需求。本文将就如何在
Vue框架中通过Vant来实现日期选择器的使用。
一、实现的效果
二、实现方案
可参考vant官网。
注：使用前要注意项目是
Vue2还是Vue3，所用到的Vant版本是不一样的！由于我的项目是
Vue2的，所以本文用的Vant版本是Vant2。
- 在现有项目中使用
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中引入此文件，如下图：
完成这两步操作之后，后续在页面里就能够正常加以使用了。
- 在使用日期选择器的时候，结合了弹出层一起使用：
用弹出层将日期选择器包起来。
弹出层设置了 底部弹出、圆角弹窗、40%的高度，这些属性都可以根据自己项目实际情况进行调整.
<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表示选择年月日。 -
在默认的日期选择器中，数字的后面是不带“年月日”这几个字的：
如果想要实现效果图中带“年月日”字样的，则需要加上formatter属性即可：
formatter(type, val) {
if (type === 'year') {
return val + '年';
}
if (type === 'month') {
return val + '月';
}
if (type === 'day') {
return val + '日';
}
return val;
},
- 如果想要日期选择器弹出来的时候，默认是当天的日期：
// 在data中设置即可
currentDate: new Date(),
-
另外可以通过
min-date和max-date属性可以确定可选的时间范围，不过我这边没有用到此属性，用的时候可参考文档进行设置即可。 -
日期选择器总共三个事件，需要哪个直接用即可：
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事件中调用即可：
timeFormat(time) { // 时间格式化 ****年*月*日
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
return year + '年' + month + '月' + day + '日';
},
这样选择完时间后，显示出来的就是下图这种：
大功告成！
三、总结
Vant 的使用方法极为简便，所需代码量极少，其文档中的 API 也十分详尽，特别适合在 Vue 项目的移动端加以运用。
以上，希望对大家有帮助！
