微信小程序日期选择器显示当前系统年月日时分

﹏ヽ暗。殇╰゛Y 2022-10-09 15:30 899阅读 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和项目名称，选择不使用云服务，新建一个项目。

![cd222119ab445b7d87b72d1a29bcf032.png][]

image

![3dd78711c56d04f9bfa795c50c1e732d.png][]

image

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

![a57f13186c001e41de3fa222aac34bd6.png][]

image

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

![b576bddfdeb7269950e5e691e33743b0.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

![dcc039ca644a30c86b6a5262e834dd55.png][]

image

![31fa01ae71024a622b5f9bf38ca7fc86.png][]

image

![0d4d719a2016fa5e7b78fc5ccbba3a56.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

![26b7407f149e73a175f28b625a59ba51.png][]

image

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

![927c45264777feb79995dfd4d091ddbb.png][]

image

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

![ef6c5ac557ace7c2303bb052de31b1ae.png][]

image

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

日期选择器文档参照一下

[https://youzan.github.io/vant-weapp/\#/datetime-picker][https_youzan.github.io_vant-weapp_datetime-picker]

5：使用DatetimePicker 时间选择组件

选择日期格式如下：

2021-06-25 9:29

参考代码：  
test.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>

test.js

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

test.json

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

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

![9ced6aa67b0005d8ff3aa3be169a9bc9.png][]

![ff18a7df8c1d665a39d02443f78b998f.png][]

以上能够使用年月日时分的组件了  
有的时候  
项目上会遇到这样的需求  
需要将当前的时间默认显示出来  
微信小程序日期选择器显示当前系统年月日时分

其实很简单  
在前面的文章里面就已经提到了  
参考之前写的文章  
我们这里需要用到utils

可以将一些公共的代码抽离成为一个单独的 js (utils.js)文件，作为一个模块;
    模块只有通过 module.exports 或者 exports 才能对外暴露接口。
    所以当你在util.js里封装的方法想要在外部使用的话,必须通过 module.exports 或者 exports 对外暴露
    这就和CommonJS 模块化标准一致

![1f73134fa0ea0111caa7462e6ba156b0.png][]

参考一下之前写的  
微信小程序显示当前系统年月日时分秒[https://blog.csdn.net/qq\_36538012/article/details/108143274][https_blog.csdn.net_qq_36538012_article_details_108143274]

1：打开项目里面默认生成的util.js  
这里可以看到，代码已经写好了，我们只需要引用就行了

const formatTime = date => {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      //const second = date.getSeconds()
    
      return `${[year, month, day].map(formatNumber).join('-')} ${[hour, minute].map(formatNumber).join(':')}`
    }
    
    const formatNumber = n => {
      n = n.toString()
      return n[1] ? n : `0${n}`
    }
    
    module.exports = {
      formatTime
    }

![94ac3bfeea336726c4f7969990ff05e7.png][]

2：开始写代码  
打开文章上面开始写好的test.wxml的demo，写一个可以显示时间的标签

<view>当前选择：{
        {currentChoose}}</view>

3:最重要的是index.js的代码  
要引入上面默认的util.js  
在调用函数时，传入new Date()参数，返回值是日期和时间  
再通过setData更改Page()里面的data，动态更新页面的数据

var util = require('../../utils/util.js');

// 调用函数时，传入new Date()参数，返回值是日期和时间  
// 再通过setData更改Page()里面的data，动态更新页面的数据

onLoad: function() {
        // 调用函数时，传入new Date()参数，返回值是日期和时间
        var time = util.formatTime(new Date());
        // 再通过setData更改Page()里面的data，动态更新页面的数据
        this.setData({
          currentChoose: time
        });
      },

4：demo例子  
test.wxml例子

test.js例子

效果显示  
微信小程序日期选择器显示当前系统年月日时分  
完成

![3b9d9c061f30ef707dadc87e5e353b50.png][]

[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
[cd222119ab445b7d87b72d1a29bcf032.png]: /images/20221005/54471f6872234ecc9d976b44abcd3c52.png
[3dd78711c56d04f9bfa795c50c1e732d.png]: /images/20221005/1c7fb4fcc0554f3da0032ff1d22653cb.png
[a57f13186c001e41de3fa222aac34bd6.png]: /images/20221005/1bd23b2dc3144968be6efb9a924ae0d5.png
[b576bddfdeb7269950e5e691e33743b0.png]: /images/20221005/8ff4042954bd494481284652be0c831a.png
[dcc039ca644a30c86b6a5262e834dd55.png]: /images/20221005/a39e828114a3449b87e9a5c04a97ed6d.png
[31fa01ae71024a622b5f9bf38ca7fc86.png]: /images/20221005/25dd9b11675844daab6526eacc6e2299.png
[0d4d719a2016fa5e7b78fc5ccbba3a56.png]: /images/20221005/cdde935daf6d4f72b1a03dd25f0cba63.png
[26b7407f149e73a175f28b625a59ba51.png]: /images/20221005/bd97b85b00574442a69811e280acef1a.png
[927c45264777feb79995dfd4d091ddbb.png]: /images/20221005/299546f0ddd947e3a08b4a95695d1177.png
[ef6c5ac557ace7c2303bb052de31b1ae.png]: /images/20221005/c94e94de9f1c4064b562470e7037528a.png
[https_youzan.github.io_vant-weapp_datetime-picker]: https://links.jianshu.com/go?to=https%3A%2F%2Fyouzan.github.io%2Fvant-weapp%2F%23%2Fdatetime-picker
[9ced6aa67b0005d8ff3aa3be169a9bc9.png]: /images/20221005/8fc29e2f576e4abf932fbbd35cd89b32.png
[ff18a7df8c1d665a39d02443f78b998f.png]: /images/20221005/9fb2c516a20c42aab740ee0c66f1228f.png
[1f73134fa0ea0111caa7462e6ba156b0.png]: /images/20221005/0151fb6b9954463d8782d917352bb9a1.png
[https_blog.csdn.net_qq_36538012_article_details_108143274]: https://links.jianshu.com/go?to=https%3A%2F%2Fblog.csdn.net%2Fqq_36538012%2Farticle%2Fdetails%2F108143274
[94ac3bfeea336726c4f7969990ff05e7.png]: /images/20221005/1125990c9a2644a8b4f84185c4dd1fa5.png
[3b9d9c061f30ef707dadc87e5e353b50.png]: /images/20221005/b32891fea321492ca995cf3e5920e132.png