微信小程序－vant-weapp日历组件的使用（年月日）

末蓝、 2022-10-08 11:18 487阅读 0赞

# 小程序vant-weapp的日历组件的使用 #

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp  
Github源码：[https://github.com/youzan/vant-weapp][https_github.com_youzan_vant-weapp]  
中文文档：[https://youzan.github.io/vant-weapp/\#/intro][https_youzan.github.io_vant-weapp_intro]

--------------------

1：打开微信开发者工具，填写自己的appid和项目名称，选择不使用云服务，新建一个项目。

![1b0d0984468617b922173d94b8e5b3e4.png][]

image

![dfdca56469ba8e7213d9b78bc028a874.png][]

image

2：右击在选择在终端打开

![4fc8ce95fda4920dfc6676066184dbb6.png][]

image

进入项目的根目录底下，注意，一定要进入根目录哦，使用cd ../返回上一级目录~

![20e23870801600c3fedf5a3b62c92d1f.png][]

image

3：小程序已经支持使用 npm 安装第三方包，  
这里通过 npm 安装

1、第一步：npm init
    
       2、第二步：npm install --production
    
       3、第三步： npm i @vant/weapp -S --production
          或者  npm i vant-weapp -S --production

![2908ea914f926113cdcac8092c8f1c27.png][]

image

![e0eba79455aeb8cb7abeac23f54babcc.png][]

image

![682043e1bd0e0482c898c658e3afaf66.png][]

image

这里需要注意一下  
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production  
引入的区别

使用npm i vant-weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径

{
      "usingComponents": {
        "van-button": "../../miniprogram_npm/vant-weapp/button/index"
      }
    }

使用npm i @vant/weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径(推荐，因为这个可以直接抄文档，不需要改变引入路径的~)

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

4：在微信开发工具执行npm 构建，点击工具里面，构建npm

![9620e9f6de4941e8167569a4c2bd3e17.png][]

image

构建过程需要等待一会儿，不要捉急

![80ad5e325c1fcc9549628c3a7b599fdb.png][]

image

构建完会生成一个miniprogram\_npm文件夹  
如果构建完如果编译报错，再构建一次就好了

![f42f4ab1ede6f989ce40654dcc49317f.png][]

image

##### 话不多说，来看看小程序vant-weapp的日历组件的使用 #####

日历文档参照一下

> [https://youzan.github.io/vant-weapp/\#/calendar][https_youzan.github.io_vant-weapp_calendar]

5：使用vant-weapp日历组件  
我这里对日期的处理，是需要这样的格式YYYY-MM-dd  
所以在对选中的日期做了一些处理和判断~

2020-10-26

wxml

const app = getApp()
    Page({
      data: {
        maxDate: new Date().setFullYear(new Date().getFullYear() + 2),
        show: false,
        taskStartTime: '',
        time: '',
      },
      showCalendar() {
        this.setData({ show: true })
      },
      onClose() {
        this.setData({ show: false })
      },
      formatDate(date) {
        let taskStartTime
        if (date.getMonth() < 9) {
          taskStartTime = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-"
        } else {
          taskStartTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
        }
        if (date.getDate() < 10) {
          taskStartTime += "0" + date.getDate()
        } else {
          taskStartTime += date.getDate()
        }
        this.setData({
          taskStartTime: taskStartTime,
        })
        return taskStartTime;
      },
      onConfirm(e) {
        this.setData({
          time: this.formatDate(e.detail),
          show: false
        })
      },
      onLoad: function (options) {
      },
      confirmPublish: function () {
        const data = {}
        data.taskStartTime = this.data.taskStartTime
        console.log(JSON.stringify(data))
      },
    })

json

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

![362ddb56cbcf54098fe9fefd248cb21a.png][]

image

![c4adf2fc27d8f84df8d3f487bac4cc1b.png][]

image

[https_github.com_youzan_vant-weapp]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fyouzan%2Fvant-weapp
[https_youzan.github.io_vant-weapp_intro]: https://links.jianshu.com/go?to=https%3A%2F%2Fyouzan.github.io%2Fvant-weapp%2F%23%2Fintro
[1b0d0984468617b922173d94b8e5b3e4.png]: /images/20221005/5ec7a21453e84fdfa99fdbc052afd456.png
[dfdca56469ba8e7213d9b78bc028a874.png]: /images/20221005/6dfbfe4761be4f349281469c5b33f2f7.png
[4fc8ce95fda4920dfc6676066184dbb6.png]: /images/20221005/8fba267221e347fab2b311b54aabdf3f.png
[20e23870801600c3fedf5a3b62c92d1f.png]: /images/20221005/737fa88e78cc47b5a0df8400353d01c4.png
[2908ea914f926113cdcac8092c8f1c27.png]: /images/20221005/16d3219cd3c840f5934c7e171df94921.png
[e0eba79455aeb8cb7abeac23f54babcc.png]: /images/20221005/2384e1ba2e844e26a14043b4ae26fb14.png
[682043e1bd0e0482c898c658e3afaf66.png]: /images/20221005/4787522cbdc745149258cfa3aaee1541.png
[9620e9f6de4941e8167569a4c2bd3e17.png]: /images/20221005/f00970b358884393af6efa82d0d57dcd.png
[80ad5e325c1fcc9549628c3a7b599fdb.png]: /images/20221005/5e4625da571147328cc4c07c15d92592.png
[f42f4ab1ede6f989ce40654dcc49317f.png]: /images/20221005/bfa00b3ef9354c7b84c25364262ebeb4.png
[https_youzan.github.io_vant-weapp_calendar]: https://links.jianshu.com/go?to=https%3A%2F%2Fyouzan.github.io%2Fvant-weapp%2F%23%2Fcalendar
[362ddb56cbcf54098fe9fefd248cb21a.png]: /images/20221005/f5d8032d622443a5879fd5a0f7ea9834.png
[c4adf2fc27d8f84df8d3f487bac4cc1b.png]: /images/20221005/a4418cc2f47a481a99ea222c3ff7727d.png