小程序进阶-日历面板

简介

在开发 小程序过程中，选择日期是我们最常见的一种需求。官方为我们提供了picker组件，从底部弹出日历列表供用户选择，但要满足更加优质的体验要求显然还达不到目标。所以，我这里推荐使用Vant Weapp小程序UI组件。

picker

小程序提供的从底部弹起的滚动选择器。

• index.wxml示例代码

<view class="section">
  <view class="section__title">日期选择器view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    view>
  picker>
view>

• index.js示例代码

Page({
	data: {
		date: '2022-02-2'
	},
	bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
})

• 运行效果
  

Vant Weapp

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已，是业界主流的移动端组件库之一。

Calendar

日历组件用于选择日期或日期区间。

小程序要使用Vant Weapp组件库应该怎么办呢？这里我推荐使用npm安装构建。
搭建npm环境教程
小程序npm支持

npm构建流程

• 以管理员身份打开cmd命令提示符，然后输入命令到指定目录。

• 调用 npm init 来初始化 package.json，它是NodeJS 约定的用来存放项目的信息和配置等信息的文件。

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

• 修改app.json，将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

• 修改 project.config.json，使开发者工具可以正确索引到 npm 依赖的位置。
  

• 点击微信开发者工具中的菜单栏：工具 --> 构建 npm
  

Canlendar使用范例

• 在app.json或index.json中引入组件

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

• index.wxml代码片段

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

• 效果展示