微信小程序 选择年和月以及回显 使用picker-view组件

html 复制代码
<!--选择年月-->
  <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>
javascript 复制代码
/*选择年月-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*/
})  
css 复制代码
/*选择月份-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*/

自己记录用的 可以作为参考

相关推荐
DK185838322528 小时前
【源码开源部署】电竞代练护航陪玩小程序:全游戏服务平台完整解决方案(附宝塔部署教程)
游戏·微信小程序·uni-app·开源·php
码云数智-大飞9 小时前
2026 年跨端开发决战:小程序原生 vs uni-app vs Taro 深度对比
小程序·uni-app·taro
黑马程序员毕设14 小时前
基于Java的仪器管理系统设计与实现
java·开发语言·spring boot·后端·微信小程序
河北清兮网络科技14 小时前
直播APP开发怎么选?流媒体高端定制架构解析,避开模板与外包技术坑
小程序·架构·app·短剧·短剧app·广告联盟
上单带刀不带妹16 小时前
小程序图片缓存问题:时间戳和版本号解决图片不更新
缓存·小程序·vue·uniapp
bug总结17 小时前
uniapp 微信小程序请求规范
微信小程序·小程序·uni-app
微三云 - 廖会灵 (私域系统开发)18 小时前
垂直行业 SaaS 实践|AI 美业小程序,构建美业服务全链路数字化闭环
人工智能·小程序
做萤石二次开发的哈哈19 小时前
海康班班通交互一体机技能接入实战:ISAPI透传+OTAP双协议封装,Web/App/小程序教学管理应用一站生成
前端·物联网·小程序·交互·萤石开放平台·蓝海aiot一站式工作台·aiot开发
云迈科技-软件定制开发19 小时前
长沙企业软件开发、App 开发全流程|需求、开发、上线、运维拆解
小程序·app开发