微信小程式 picker-view日期選擇器(二)
阿新 • • 發佈:2018-12-12
上一篇講的是微信小程式裡面,時間控制元件最大選擇日期為當前日期,這篇寫不限制最大選擇日期。 wxml的程式碼部分還是一樣的,只是js稍微改動了一下,並且這個可以實現月份和日期小雨10的時候,前面加0的效果。 給出效果圖: 貼出程式碼: 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) { }, })