在微信或者app开发过程中,经常会遇到时间选择的需求，当然这只是其中一个案例，不一定都适用，只是提供一种vant ui使用方式，更多的demo及相关文档，可以去vant 官网去查看。本案例是在已经引入vant UI 基础上开发的，没有引入vant 的，需要事先引入vant 框架。

1、效果图

2、代码部分

a、calendar.json文件

主要是vant 组件引用，由于我的是在分包中引用组件，故具体的路径需要具体分析修改，不能直接复制，因为可能会由于路径不对，导致打不开vant 组件。

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

b、calendar.ts 文件

//index.jsPage({/*** 页面的初始数据*/data: {dateString: "",show: false,max_data: "",min_data: "",date:""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var timeStamp = new Date();//默认选中当天var titledt = this.formatDateS(timeStamp);let min_data = new Date(titledt).getTime();let max_data = min_data +(24 * 60 * 60 * 31*1000 );console.log("==ssssfsaaa=="+max_data+"==min_data=="+min_data)// console.log("==min_data====" + min_data)this.setData({min_data: min_data,max_data:max_data,date:titledt})},//转换为时间格式formatDateS(dates:any) {let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');var date = new Date(dates);date.setDate(date.getDate());let weekDay = date.getDay();var weekDate = show_day[weekDay]var YY = date.getFullYear() + '-';var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + " ";var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());var mm = ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());var ss = ':' + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());return YY + MM + DD;},// 确认事件onConfirm(e){let min_data = new Date(e.detail)console.log("==min_data====" + JSON.stringify(this.formatDateS(e.detail)))this.setData({show: false,date:""+this.formatDateS(e.detail)})},//显示onDisplay: function () {this.setData({show: true})},// 关闭弹窗onClose() {this.setData({show: false})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

c、calendar.wxml文件

<!--index.wxml-->
<van-cell title="时间选择" value="{{ date }}" bind:click="onDisplay" is-link/>
<van-calendar  class="calendar" type="single" poppable="{{ true }}" default-date="{{min_data}}" min-date="{{min_data}}" max-date="{{max_data}}" show="{{ show }}" bind:close="onClose" color="#06c7ae" show-title="{{false}}" bind:confirm="onConfirm" show-confirm="{{false}}" />

D、calendar.wxss文件

/**index.wxss**/
page{background-color: #f6f6f6;
}/*时间选择*/
.van-cell {border-radius: 10rpx;margin: 20rpx;margin-right: 60rpx;
}

样式修改，可以通过van-cell对cell 进行样式修改。

微信小程序使用vant实现日历弹框相关推荐

微信小程序使用VANT filed 组件 input框内文字省略
使用外部样式类 input-class wxml文件 <van-field input-class='inputClass' readonly label="项目名称" ma ...
微信小程序用vant自定义tabbar页面并跳转相应页面
0.前置安装步骤一安装 vant 组件库 npm i @vant/weapp -S --production 下载完后要npm构建才能使用步骤二修改 app.json 将 app.json 中 ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
微信小程序引用vant toast 提示 “未找到 van-toast 节点“
微信小程序引用vant 的toast 出现如下报错都是因为没有正确引入toast 组件正确引入toast 组件需要在三个文件中设置在 .wxml 文件的 view 内写入 <van-toa ...
微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序中Vant Weapp的引用与使用
微信小程序中Vant Weapp的引用与使用 1.安装方式 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @va ...
微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序使用vant weapp报错
微信小程序使用vant weapp报错错误一:构建错误错误二:["usingComponents"]["van-button"] 未找到我的安装流程 1. ...
微信小程序用vant组件制作通讯录
微信小程序用vant组件制作通讯录效果图: 代码如下: .wxml: 在这里插入<van-index-bar index-list="{{ indexList }}"> ...

微信小程序使用vant实现日历弹框