微信小程序－vant-weapp日期选择器的使用（年月日时分）

约定不等于承诺〃 2022-10-11 01:00 29阅读 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和项目名称，选择不使用云服务，新建一个项目。

![image][]

![image][image 1]

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

![image][image 2]

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

![image][image 3]

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

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

![image][image 4]

![image][image 5]

![image][image 6]

这里需要注意一下  
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

![image][image 7]

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

![image][image 8]

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

![image][image 9]

##### 话不多说，来看看小程序vant-weapp的日期选择器的使用 #####

日期选择器文档参照一下

https://youzan.github.io/vant-weapp/\#/datetime-picker

5：使用DatetimePicker 时间选择组件

选择日期格式如下：

2021-06-25 9:29

参考代码：  
wxml

<view>当前选择：{
       {currentChoose}}</view>
    <button bind:tap="openPicker">打开选择器</button>
    <van-action-sheet show="{
       { show }}" bind:close="onClose" bind:getuserinfo="onGetUserInfo">
      <van-datetime-picker type="datetime" value="{
       { currentDate }}" min-date="{
       { minDate }}" max-date="{
       { maxDate }}" bind:cancel="onCancel"
        bind:confirm="onConfirm"  bind:change="onChange" />
    </van-action-sheet>

const app = getApp()
    Page({
      data: {
        minHour: 0,
        maxHour: 24,
        minDate: new Date(1990,1,1).getTime(),
        maxDate: new Date(2099, 12, 31).getTime(),
        currentDate: new Date().getTime(),
        show: false,
        currentChoose: ''
      },
      openPicker() {
        this.setData({ show: true })
      },
      onConfirm(e) {
        this.setData({ show: false, currentChoose: this.formatDate(new Date(e.detail)) })
      },
      onClose() {
        this.setData({ show: false })
      },
      onCancel() {
        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()
        }
        taskStartTime += " " + date.getHours() + ":" + date.getMinutes()
        this.setData({
          taskStartTime: taskStartTime,
        })
        return taskStartTime;
      },
    })

json

{
      "usingComponents": {
        "van-datetime-picker": "@vant/weapp/datetime-picker/index",
        "van-action-sheet": "@vant/weapp/action-sheet/index"
      }
    }

结果：  
点击打开选择器的时候  
日期选择器的组件会从底部弹框弹出  
可以选择自己想要的时间，然后将时间显示在页面上  
或者传递给后端都可以  
根据自己的需求进行修改~~~

![e560a133fb879af0438481315a77605f.png][]

![6c7b657da7336c0f50f915fecc531a1f.png][]

© 著作权归作者所有,转载或内容合作请联系作者  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[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
[image]: /images/20221005/5d598988af48453199ad1e450cd74810.png
[image 1]: /images/20221005/fc8a3bd369064e84b8ac690fea442041.png
[image 2]: /images/20221005/8d73c5d7c0f3463cb35c3d97041e46d8.png
[image 3]: /images/20221005/79ab39a7b1bf4eb888af4ec9815c0d97.png
[image 4]: /images/20221005/945d48e60a134a0d835327ac98c14f0b.png
[image 5]: /images/20221005/f39373a721574a19968dadf60e03d295.png
[image 6]: /images/20221005/782d0ef73d92419ca0c9ed3e0ea09e92.png
[image 7]: /images/20221005/02a47388375b4a7c94f4bd001d9030f7.png
[image 8]: /images/20221005/a70bb55593dc4eaca3b7dbc35b1de473.png
[image 9]: /images/20221005/9009251ab7534d4f973694bb92b7a13c.png
[e560a133fb879af0438481315a77605f.png]: /images/20221005/191dec6162db42269fca256109d1dd2f.png
[6c7b657da7336c0f50f915fecc531a1f.png]: /images/20221005/23e7d691a0c641888884e18606d4f8f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/c7e28805b4ff47b2a86b5acbfc9e33c6.png