微信小程序设置年月日选择器
2021/9/13 14:04:56
本文主要是介绍微信小程序设置年月日选择器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在微信小程序项目开发中,大家往往会遇到日期选择器的需求,分享一下关于日期选择器的代码,可选择具体的日期。
一、.js代码
//获取年月日 const date = new Date() const nowYear = date.getFullYear() const nowMonth = date.getMonth() + 1 const nowDay = date.getDate() let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] // 根据年月 获取当月的总天数 let getDays = function (year, month) { console.log(year, month); if (month === 2) { return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28 } else { return daysInMonth[month - 1] } } // 根据年月日设置当前月有多少天 并更新年月日数组 let setDate = function (year, month, day, _th) { let daysNum = year === nowYear && month === nowMonth ? nowDay : getDays(year, month) day = day > daysNum ? 1 : day let monthsNum = year === nowYear ? nowMonth : 12 let years = [] let months = [] let days = [] let yearIdx = 9999 let monthIdx = 0 let dayIdx = 0 // 重新设置年份列表 for (let i = 1950; i <= nowYear; i++) { years.push(i) } years.map((v, idx) => { if (v === year) { yearIdx = idx } }) // 重新设置月份列表 for (let i = 1; i <= monthsNum; i++) { months.push(i) } months.map((v, idx) => { if (v === month) { monthIdx = idx } }) // 重新设置日期列表 for (let i = 1; i <= daysNum; i++) { days.push(i) } days.map((v, idx) => { if (v === day) { dayIdx = idx } }) _th.setData({ years: years, //年份列表 months: months, //月份列表 days: days, //日期列表 value: [yearIdx, monthIdx, dayIdx], year: year, month: month, day: day }) } Page({ /** * 页面的初始数据 */ data: { years: [], months: [], days: [], year: nowYear, month: nowMonth, day: nowDay, value: [9999, 1, 1] }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { setDate(this.data.year, this.data.month, this.data.day, this) }, bindChange: function (e) { let val = e.detail.value setDate(this.data.years[val[0]], this.data.months[val[1]], this.data.days[val[2]], this) } })
二、.WXML代码
<view class="birthBox"> <label>日期</label> <picker-view wx:if="{{years.length>0 && months.length>0 && days.length>0}}" style="width: 100%; height: 180rpx;" value="{{value}}" bindchange="bindChange"> <picker-view-column> <view wx:for="{{years}}" wx:key="index">{{item}}年</view> </picker-view-column> <picker-view-column> <view wx:for="{{months}}" wx:key="index">{{item}}月</view> </picker-view-column> <picker-view-column> <view wx:for="{{days}}" wx:key="index">{{item}}日</view> </picker-view-column> </picker-view> </view>
三、如果需要点击确定后才改变日期可设置中间变量进行接收,点击确认后进行赋值
这篇关于微信小程序设置年月日选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28uniapp 小程序获取到数据库的换行符怎么展示-icode9专业技术文章分享
- 2024-09-20微信小程序全栈项目实战:从零开始的全面指南
- 2024-09-20微信小程序项目实战:零基础入门教程
- 2024-09-19微信小程序项目中miniprogram_npm文件跟node_modules文件的差别-icode9专业技术文章分享
- 2024-08-27小程序 单行显示,超出部分省略号显示的方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享
- 2024-08-21微信小程序全栈入门:从零开始的一站式指南
- 2024-08-21微信小程序入门:轻松打造你的第一款小程序