微信小程序 vant 封装DatetimePicker时间选择器

效果：

1.在components文件下新建dateTimePicker文件

在index.wxml文件中编写：

<view class="container" bindtap="showPop"><van-popup show="{{ isShowpopup }}" bind:close="onClose"position="bottom"><van-datetime-pickertype="date"value="{{ currentDate }}"bind:input="onInput"bind:confirm="onConfirm"bind:cancel="onCancel"min-date="{{ minDate }}"formatter="{{ formatter }}"
/>
</van-popup>
</view>

index.json文件中编写方法，属性

Component({/*** 组件的属性列表*/properties: {isShowpopup: {type: Boolean,},},/*** 组件的初始数据*/data: {currentDate: new Date().getTime(),minDate: new Date(1940, 0, 1).getTime(),formatter(type, value) {if (type === 'year') {return `${value}年`;}if (type === 'month') {return `${value}月`;}return value;},},/*** 组件的方法列表*/methods: {// 出生日期showPop(data) {this.setData({isShowpopup: data})},// 选择日期onInput(event) {this.setData({currentDate: event.detail,});},// 选择日期 确认按钮onConfirm(val) {let a = this._timeFormat(val.detail);// this.setData({//     isShowpopup: false// })this.triggerEvent('showing',{selectDate:a,isShowpopup: false})},// 取消按钮onCancel(){this.triggerEvent('canceling',{isShowpopup: false})},_timeFormat(time) { // 时间格式化 2019-09-08console.log(time,"++")var time = new Date(time);let year = time.getFullYear();let month = time.getMonth() + 1;let day = time.getDate();let h = time.getHours(); h = h < 10 ? ('0' + h) : h;let minutes = time.getMinutes(); minutes = minutes < 10 ? ('0' + minutes) : minutes;                    return year + '-' + month + '-' + day }}
})

使用该组件的页面中引用：

index.json中引用，注册

{"usingComponents": {"v-dateTimePicker":"../../components/dateTimePicker/index"}
}

index .wxml中使用

 <view><v-dateTimePicker id="page" bind:showing="onConfirm"  bind:canceling="onCancel"wx:if="{{isShowpopup}}"/>
</view>

index.js文件定义方法，数据

data中定义：

  birthDate: '请选择出生日期', // 出生日期isShowpopup: false,

    showBirthDate() {this.setData({isShowpopup: true})// 父组件调用子组件中的方法this.selectComponent("#page").showPop('isShowpopup')},// 确认按钮onConfirm(e) {this.setData({isShowpopup: e.detail.isShowpopup,birthDate: e.detail.selectDate})},// 取消按钮onCancel(e) {this.setData({isShowpopup: e.detail.isShowpopup,})},

完整代码，做一个小记录~

微信小程序 vant 封装DatetimePicker时间选择器相关推荐

微信小程序 - 公农历通用时间选择器组件
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码序最近做了个小程序,需要用到支持公农历的通用时间选择器,找了一圈没有现成的,只能自己撸一 ...
小程序中封装ajax请求,如何在微信小程序中封装网络请求
如何在微信小程序中封装网络请求发布时间:2021-05-11 16:59:36 来源:亿速云阅读:95 作者:Leah 这期内容当中小编将会给大家带来有关如何在微信小程序中封装网络请求,文章内容丰 ...
python写的小程序怎么封装_Promise实现微信小程序接口封装过程
Promise实现微信小程序接口封装过程发布时间:2020-06-15 13:40:43 来源:亿速云阅读:419 作者:鸽子相信很多开发者都遇到过回调地狱的问题.由于微信小程序的API基本都是 ...
小程序promise封装post请求_微信小程序promise封装get/post请求
微信小程序promise封装get/post请求 2020-07-04 20:42:49 微信小程序promise封装get/post请求叶子兔 2018-10-10 08:55:30 1056 ...
微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
微信小程序修改顶部电量时间的颜色
微信小程序修改顶部电量时间的颜色 onShow: function () {wx.setNavigationBarColor({frontColor: '#ffffff',backgroundC ...
微信小程序实现缓存过期时间
微信小程序实现缓存过期时间前言一.设置缓存二.得到缓存总结前言先来看看官方文档 wx.setStorageSync(string key, any data) 将数据存储在本地缓存中指定的 ...
微信小程序获取当前系统时间以及判断周几
微信小程序获取当前系统时间以及判断周几首先获取当前日期在utils文件加中创建问价util.js function formatTime(date) {var year = date.getFul ...
学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...

微信小程序 vant 封装DatetimePicker时间选择器

微信小程序 vant 封装DatetimePicker时间选择器相关推荐

最新文章

热门文章