微信小程序 picker-view日期选择器(二)

上一篇讲的是微信小程序里面,时间控件最大选择日期为当前日期,这篇写不限制最大选择日期。
wxml的代码部分还是一样的,只是js稍微改动了一下,并且这个可以实现月份和日期小雨10的时候,前面加0的效果。
给出效果图:
微信小程序 picker-view日期选择器(二)_第1张图片
贴出代码:
js:

const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1950; i <= date.getFullYear(); i++) {
  years.push(i)
}
for (let i = 0; i <= 11; i++) {
  var k = i;
  if (0 <= i && i < 9) {
    k = "0" + (i + 1);
  } else {
    k = (i + 1);
  }
  months.push(k)
}

for (let i = 1; i <= 31; i++) {
  var k = i;
  if (0 <= i && i < 10) {
    k = "0" + i
  }
  days.push(k)
}
var thisMon = date.getMonth();
var thisDay = date.getDate();
if (0 <= thisMon && thisMon < 9) {
  thisMon = "0" + (thisMon + 1);
} else {
  thisMon = (thisMon + 1);
}
if (0 <= thisDay && thisDay < 10) {
  thisDay = "0" + thisDay;
}
function mGetDate(year, month) {
  var d = new Date(year, month, 0);
  return d.getDate();
}
Page({
  data: {
    //---时间控件参数
    flag: false,
    year: date.getFullYear(),
    month: thisMon,
    day: thisDay,
    //数组中保存的可选日期
    years: years,
    months: months,
    days: days,
    value: [date.getFullYear(), thisMon - 1, thisDay - 1],
  },
  getTime: function (e) {
    var times = this.data.year + "-" + this.data.month + "-" + this.data.day
    this.setData({
      flag: true,
      upTime: times,
    });
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]],
    })
    var totalDay = mGetDate(this.data.year, this.data.month);
    var changeDate = [];
    for (let i = 1; i <= totalDay; i++) {
      var k = i;
      if (0 <= i && i < 10) {
        k = "0" + i
      }
      changeDate.push(k)
    }
    this.setData({
      days: changeDate
    })
  },
  onLoad: function (options) {
  },
})

你可能感兴趣的:(Js,html,css,jquery,微信小程序)