1.van-calendar 日历组件 直接通过npm 拉取 发现没有没有包含calendar, 需要手动去github clone 一下vant-weapp, https://github.com/youzan/vant-weapp;
git clone https://github.com/youzan/vant-weapp.git
2.dist 文件夹里的东西 直接替换微信miniprogram/@vant/weapp 目录里的内容 换成clone回来的dev版本,这个时候打开微信ide 发现可以用了;
"usingComponents": {
"van-calendar": "@vant/weapp/calendar/index",
"van-cell": "@vant/weapp/cell/index"
}
<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />
<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />
Page({
data: {
date: '',
show: false
},
onDisplay() {
this.setData({ show: true });
},
onClose() {
this.setData({ show: false });
},
formatDate(date) {
date = new Date(date);
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(event) {
this.setData({
show: false,
date: this.formatDate(event.detail)
});
}
});
详情参考 wevant 官方文档:https://youzan.github.io/vant-weapp/#/calendar