效果如图：
wxml：
<view> <!-- <input bindtap="formatShow" value="{{formatTime}}" placeholder="2020年1月1日"></input> --> <view class="mask" bindtap='formatHide' wx:if="{{showModalTime}}"></view> <picker-view animation="{{animationData}}" wx:if="{{showModalTime}}" indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"> <view class="btnCon"> <view class="b1" bindtap="formatHide" data-btn="0">取消</view> <view class="b2" bindtap="formatHide" data-btn="1">确定</view> </view> <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> </view>wxss：
.intro { margin: 30px; text-align: center; } picker-view { position: fixed; bottom: 0; z-index: 101; border-top: #f2f2f2; background-color: #fff; } picker-view-column view { text-align: center; } .mask{ width: 100%; height: 100%; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); z-index:100; } .btnCon { position: absolute; top: 0rpx; left: 0; display: flex; justify-content: space-around; align-items: center; width: 100%; height: 80rpx; z-index: 1; background-color: #fff; } .btnCon .b1 { flex: 1; text-align: center; line-height: 80rpx; font-size: 30rpx; color: #999; } .btnCon .b2 { flex: 1; text-align: center; line-height: 80rpx; font-size: 30rpx; color: #000; }js：
// Component/dialogTime/dialogTime.js const date = new Date() const years = [] const months = [] const days = [] 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 <= 30; i++) { days.push(i) } Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { years: years, months: months, days: days, year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate(), formatTime: '', value: [9999, 0, 0], animationData: {}, showModalTime: false }, /** * 组件的方法列表 */ methods: { bindChange: function (e) { const val = e.detail.value let year = this.data.years[val[0]] let month = this.data.months[val[1]] this.mGetDate(year, month) let day = this.data.days[val[2]] this.setData({ year, month, day }) }, mGetDate(year, month) { let days = []; var d = new Date(year, month, 0); for (let i = 1; i <= d.getDate(); i++) { days.push(i) } this.setData({ days }) }, formatShow: function (e) { let bind_m = this.data.month let bind_d = this.data.day var animation = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(500).step() this.setData({ animationData: animation.export(), showModalTime: true, value: [bind_y - 1990, bind_m - 1, bind_d - 1] }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export(), showModalTime: true, value: [bind_y - 1990, bind_m - 1, bind_d - 1] }) }.bind(this), 100) }, formatHide: function (e) { let btnid = e.currentTarget.dataset.btn let formatTime = this.data.formatTime || '' if (btnid|0) { formatTime = `${this.data.year}年${this.data.month}月${this.data.day}日` } this.triggerEvent('getTime', {formatTime}) this.setData({ formatTime, showModalTime: false }) }, } })wxml：
<input type="text" disabled="true" class="form-input" value="{{formatTime}}" bindtap="bindInputName" placeholder="请选择时间"></input> <dialogTime id="dialogTime" bind:getTime="getTime"></dialogTime>js：
/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.dialogTime = this.selectComponent('#dialogTime') }, bindInputName() { this.dialogTime.formatShow() }, getTime(e) { let formatTime = e.detail.formatTime || ''; this.setData({ formatTime }) },