<!--选择年月-->
<view bindtap="pickCalendar">{{year}}年{{month}}月</view>
<picker-view wx:if="{{open}}" class="fixed-select" indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{[year, month-1]}}" bindchange="bindChange">
<view class="select-head">
<view class="close" bindtap="closeSelect">取消</view>
<view class="close sure" bindtap="sureSelect">确定</view>
</view>
<picker-view-column>
<view wx:for="{{years}}" wx:key="this" class="picker-list">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" wx:key="this" class="picker-list">{{item}}月</view>
</picker-view-column>
</picker-view>
/*选择年月-start*/
const date = new Date()
const years = []
const months = []
for (let i = 1900; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
/*选择年月-end*/
Page({
data: {
/*选择日期-start*/
years,
months,
year: date.getFullYear(), //年份
month: date.getMonth() + 1, //几月
value: [9999, 0, 0], // 获取年月份
open: false,
checkedYear: '',//选中的年份 最后赋值用
checkedMonth: '',//选中的月份 最后赋值用
/*选择日期-end*/
},
/*其它代码*/
/*月份选择器-start*/
pickCalendar(){
console.log(this.data.month)
this.setData({
open: true
})
},
//确定选择
sureSelect(){
this.setData({
// val 上面定义了 接收的是e里面的值 为数组
year: this.data.checkedYear || this.data.year,
month: this.data.checkedMonth || this.data.month,
open: false
})
},
// 取消选择
closeSelect() {
this.setData({
open: false
})
},
// 日期改变
bindChange(e) {
const val = e.detail.value
this.setData({
// val 上面定义了 接收的是e里面的值 为数组
checkedYear: this.data.years[val[0]],
checkedMonth: this.data.months[val[1]],
})
},
/*月份选择器-end*/
})
/*选择月份-start*/
.fixed-select {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
height: 350rpx;
background-color: #fff;
border-top: 2px solid #e9e9ea;
}
.fixed-select .select-head {
position: absolute;
top: 0;
z-index: 111;
display: flex;
justify-content: space-between;
width: 100%;
line-height: 60rpx;
background-color: #eee;
}
.fixed-select .select-head .close {
padding: 10rpx 20rpx;
}
.fixed-select .select-head .sure {
color: #ffb81c;
}
.picker-list{line-height: 50px; text-align: center;}
/*选择月份-end*/
自己记录用的 可以作为参考文章来源地址https://www.toymoban.com/news/detail-623110.html
文章来源:https://www.toymoban.com/news/detail-623110.html
到了这里,关于微信小程序 选择年和月以及回显 使用picker-view组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!