在最近的项目中，我们遇到了在小程序中选择一段时间的功能。 由于小程序附带的picker-view功能不完整，无法自动显示每月天数
在原来的基础上改善了位置
网页代码
view class=' time ' view class=' time _ text ' view开始时间： {{startyear}}年{{startmonth}}月{{startday}}日/view/viewviewclass=' item _ time ' picker-view indicator-class=' picker _ active ' mask-class=' mask ' value={ { ss } ' data-type=' start ' bind change=' bind change ' picker-view-columnviewwx 3360 for=' { years } } ' wx 3360 key=' } picker-view-column picker-view-columnviewwx 3360 for=' { months } } ' wx 3360 key=' { index } } ' bind change=' } picker-view-column picker-view-columnviewwx 3360 for=' { { days } } ' wx 3360 key=' { index } } { { { item } }日/view 年{{endmonth}}月{{endday}}日/view/view viewclass=' item _ time ' picker-view indicator-class=' picker _ aass ' data-type=' end ' bind change=' bind change ' picker-view-columnviewwx 3360 for=' { { years } } ' wx 3360 key={ } picker-view-column picker-view-columnviewwx 3360 for=' { { months } } ' wx 3360 key=' { index } } { { { item } }月picker
//pages/trajectory/trajectory.jscons tdate=new date (const years=[ ] const months=[ ] const days=[ ]//将当前日期的年月日VV var currentDate=new Date ().getDate )； //当前月中包含的天数varmaxdate=newdate(currentyear，currentMonth，0 ).getDate )； //所有年份for(letI=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号