当前位置: 首页 > news >正文

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

<!--选择年月--><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.valuethis.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*/

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

http://www.lryc.cn/news/106993.html

相关文章:

  • 助力工业物联网,工业大数据之ST层的设计【二十五】
  • MySQL实践——参数SQL_SLAVE_SKIP_COUNTER的奥秘
  • 小程序面试题
  • 微信小程序接入腾讯云天御验证码
  • Docker build 命令详解
  • 基于Translators的多语言翻译解决方案
  • Unity 性能优化五:渲染模块压力
  • Redis数据库 | 事务、持久化
  • 浅析大数据时代下的视频技术发展趋势以及AI加持下视频场景应用
  • TensorRT学习笔记--基于YoloV8检测图片和视频
  • 【C++】开源:matplotlib-cpp静态图表库配置与使用
  • 香港IT软件开发服务公司Alpha Technology 申请纳斯达克IPO上市
  • JavaScript:数组深拷贝
  • 干翻Dubbo系列第七篇:@EnableDubbo、@DubboService、@DubboReference注解的作用
  • clickhouse断电重启故障解决方案
  • Spring学习笔记之Bean的实例化方式
  • JVM-类加载器
  • ChatGPT在法律行业的市场潜力
  • Python编程从入门到实践练习第三章:列表简介
  • 【Spring Boot】请求参数传json数组,后端采用(pojo)新增案例(103)
  • Redis 持久化RDB和AOF
  • 【ThinkPHP】PHP实现分页功能
  • chrome 插件开发
  • 开源MinDoc wiki系统搭建
  • pytest.ini 文件说明
  • 遥感、GIS、GPS在土壤空间数据分析、适应性评价、制图、土壤普查中怎样应用?
  • git | git使用心得记录
  • java策略模式三种实现方案
  • VMWare虚拟系统上网设置及VMWare虚拟机三种工作模式详解
  • 计算机网络(3) --- 网络套接字TCP