微信小程序选择开始时间和结束时间控件

最近项目中遇到了要在小程序中选择一段时间的功能 由于小程序自带的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.js
const 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号