简介
在开发 小程序过程中,选择日期是我们最常见的一种需求。官方为我们提供了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), }); },
- 效果展示