小程序现在只有单个的时间和日期组件，没有完整的
下面提供一种方法，仅供参考，是模仿picker形式 但是是动画做出来的
view
<view class='text' bindtap='chooseSezi'>
选择时间和日期</view>
<!--隐藏区域 -->
<view class='maskLayer' wx:if="{{chooseSize}}" bindtap='hideModal'>
<view>
确定 取消按钮
</view>
</view>
<view class='choose' wx:if="{{chooseSize}}" animation='{{animationData}}'>
<view class='box-shijian' hidden='{{shijian}}'>
<view>{{year}}年{{month}}月{{day}}日{{hour}}时{{fen}}分</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="changtime">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{hours}}" style="line-height: 50px">{{item}}时</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{fens}}" style="line-height: 50px">{{item}}分</view>
</picker-view-column>
</picker-view>
</view>
</view>
js
const date = new Date()
const years = []
const months = []
const days = []
const hours = []
const fens = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
for (let i = 1; i <= 24; i++) {
hours.push(i)
}
for (let i = 1; i <= 60; i++) {
fens.push(i)
}
// pages/animate/animate.js
Page({
/**
* 页面的初始数据
*/
data: {
chooseSize: false,
animationData: {},
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
hours: hours,
hour: 2,
fens: fens,
fen: 2,
year: date.getFullYear(),
value: [9999, 2, 1, 0, 0],
},
changtime: function (e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]],
hour: this.data.hours[val[3]],
fen: this.data.fens[val[4]]
})
},
chooseSezi: function (e) {
// 用that取代this，防止不必要的情况发生
var that = this;
// 创建一个动画实例
var animation = wx.createAnimation({
// 动画持续时间
duration: 500,
// 定义动画效果，当前是匀速
timingFunction: 'linear'
})
// 将该变量赋值给当前动画
that.animation = animation
// 先在y轴偏移，然后用step()完成一个动画
animation.translateY(1000).step()
// 用setData改变当前动画
that.setData({
// 通过export()方法导出数据
animationData: animation.export(),
// 改变view里面的Wx：if
chooseSize: true
})
// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
setTimeout(function () {
animation.translateY(200).step()
that.setData({
animationData: animation.export()
})
}, 200)
},
hideModal: function (e) {
var that = this;
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'linear'
})
that.animation = animation
animation.translateY(200).step()
that.setData({
animationData: animation.export()
})
setTimeout(function () {
animation.translateY(0).step()
that.setData({
animationData: animation.export(),
chooseSize: false
})
}, 200)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
效果图