最近项目中遇到了要在小程序中选择一段时间的功能 由于小程序自带的picker-view 功能不完善 无法自动显示每个月的天数
所在在原来的基础上进行了改进
wxml代码
<view class="time"><view class="time_text"><view>开始时间：{{startyear}}年{{startmonth}}月{{startday}}日</view></view><view class="item_time"><picker-view indicator-class="picker_active" mask-class="mask" value="{{startvalue}}" data-type="start" 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}}" bindchange="monthChange">{{item}}月</view></picker-view-column><picker-view-column><view wx:for="{{days}}" wx:key="{{index}}">{{item}}日</view></picker-view-column></picker-view></view><view class="time_text"><view>结束时间：{{endyear}}年{{endmonth}}月{{endday}}日</view></view><view class="item_time"><picker-view indicator-class="picker_active" mask-class="mask" value="{{endvalue}}" data-type="end" 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></view>
js代码：
// pages/trajectory/trajectory.jsconst date = new Date()const years = []const months = []const days = []// 获取当前日期的年月日var currentYear = new Date().getFullYear();var currentMonth = new Date().getMonth() + 1;var currentDate = new Date().getDate();// 当前月份包含的天数var maxDate = new Date(currentYear, currentMonth, 0).getDate();// 所有的年份for (let i = 1990; i <= date.getFullYear(); i++) {years.push(i)}// 所有的月份for (let i = 1; i <= 12; i++) {months.push((i + "").padStart(2, '0'))}// 当前月份包含的所有天数for (let i = 1; i <= maxDate; i++) {days.push((i + "").padStart(2, '0'))}Page({/*** 页面的初始数据*/data: {// 列表与时间控件的显示与隐藏listShow: true,// 时间控件years: years,months: months,days: days,// 开始日期文字startyear: '',startmonth: '',startday: '',// 时间控件开始时间startvalue: [],// 结束日期文字endyear: '',endmonth: '',endday: '',// 时间控件结束时间endvalue: [],},// 时间更改bindChange: function(e) {const val = e.detail.value;var newDays = [];var maxDate = new Date(this.data.years[val[0]], this.data.months[val[1]], 0).getDate();// 选择月份包含的所有天数for (let i = 1; i <= maxDate; i++) {newDays.push((i + "").padStart(2, '0'))}// 时间文字内容更改if (e.target.dataset.type == 'start') { //开始时间//判断月份是否发生改变---月份改变 对应的当月包含天数改变并且定位到1号if (this.data.startmonth != this.data.months[val[1]]) {this.setData({days: newDays,startvalue: [val[0], val[1], 0],startyear: this.data.years[val[0]],startmonth: this.data.months[val[1]],startday: days[0]})} else {this.setData({startyear: this.data.years[val[0]],startmonth: this.data.months[val[1]],startday: this.data.days[val[2]]})}} else { //结束时间//判断月份是否发生改变---月份改变 对应的当月包含天数改变并且定位到1号console.log(days[0])if (this.data.endmonth != this.data.months[val[1]]) {this.setData({days: newDays,endvalue: [val[0], val[1], 0],endyear: this.data.years[val[0]],endmonth: this.data.months[val[1]],endday: days[0]})} else {this.setData({days: newDays,endyear: this.data.years[val[0]],endmonth: this.data.months[val[1]],endday: this.data.days[val[2]]})}}},// 提交选择的时间submitTime: function() {this.setData({listShow: true})},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {// 获取时间控件---默认的开始时间和结束时间var defaultYear = years.length - 1;var defaultMonth = currentMonth;var defaultDate = currentDate - 1;this.setData({// 开始日期文字startyear: currentYear,startmonth: currentMonth,startday: currentDate,// 时间控件开始时间startvalue: [defaultYear, defaultMonth, defaultDate],// 结束日期文字endyear: currentYear,endmonth: currentMonth,endday: currentDate,// 时间控件结束时间endvalue: [defaultYear, defaultMonth, defaultDate],})},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}})
实现的效果图
按照用户选择的月份可以用var maxDate = new Date('年份','月份’, 0).getDate(); 获取该月份包含的天数 当用户更改月份 日期显示当月包含的天数并且定位到1号
