微信小程序vant-weapp的日历组件的使用的代码

在Vant Weapp中，使用日历组件（Calendar）可以让你轻松地添加日期选择功能到微信小程序中。以下是基本的步骤和代码示例：

首先，你需要安装` vant-calendar `这个组件。在项目目录下打开终端，运行：

npm install vant-calendar

或者如果你使用的是 yarn:

yarn add vant-calendar

然后，在你的页面文件（如`index.wxml`）中引入并使用它：

<import src="vant/components/calendar/index.wxml" />

<!-- 在需要展示的地方 -->
<view class="container">
  <van-calendar :value="selectedDate" @change="onDateChange"></van-calendar>
</view>

接着，在对应的`index.wxss`中添加样式，并在`index.js`中配置和处理事件：

// index.js

Page({
  data: {
    selectedDate: '', // 初始选中的日期
  },
  
  onReady() {
    this.initCalendar();
  },
  
  initCalendar() {
    const calendar = this.selectComponent('#calendar');
    calendar.value = this.selectedDate; // 初始化值
  },
  
  formatDate(date) {
    return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
  },
  
  onDateChange(value) {
    this.selectedDate = value;
    console.log('新的选择日期:', this.formatDate(value)); // 打印选定日期
  }
})

以上就是一个简单的微信小程序Vant Weapp日历组件的基本用法。记得在实际项目中根据需求调整样式和事件处理。