微信小程序引用 vant weapp calendar选择器

npm i @vant/weapp -S --production 安装组件

修改app.json，将 app.json 中的 “style”: “v2” 去除

修改 project.config.json，最后添加"packNpmManually": true,

    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

json中引入组件

"usingComponents": {
  "van-calendar": "@vant/weapp/calendar/index"
   "van-cell": "@vant/weapp/cell/index"
}

wxml代码

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />
<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />

js代码

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),
    });
  },

标签：程序小程序js