小程序进阶-日历面板

简介

在开发小程序过程中，选择日期是我们最常见的一种需求。官方为我们提供了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代码片段

<van-cell title="选择单个日期" value="{
     
     { date }}" bind:click="onDisplay" />
<van-calendar show="{
     
     { show }}" bind:close="onClose" bind:confirm="onConfirm" />

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

效果展示

在这里插入图片描述