效果：
1.在components文件下新建dateTimePicker文件
在index.wxml文件中编写：
<view class="container" bindtap="showPop">
<van-popup show="{{ isShowpopup }}" bind:close="onClose"
position="bottom">
<van-datetime-picker
type="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-08
console.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,
})
},
完整代码，做一个小记录~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79279.html
