微信小程序picker 日期(年/月/日/时/分)选择器
<view class="df yuding" style="padding:24rpx 0;"> <view class="fs26">预计到店</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <input value='{{time}}' name="dd_time" placeholder='选择时间' class="fs26 changetime"/> </picker> </view>
const date = new Date(); const years = []; const months = []; const days = []; const hours = []; const minutes = []; //获取年 for (let i = date.getFullYear(); i <= date.getFullYear() + 1; i++) { years.push("" + i); } //获取月份 for (let i = 1; i <= 12; i++) { if (i < 10) { i = "0" + i; } months.push("" + i); } //获取日期 for (let i = 1; i <= 31; i++) { if (i < 10) { i = "0" + i; } days.push("" + i); } //获取小时 for (let i = 0; i < 24; i++) { if (i < 10) { i = "0" + i; } hours.push("" + i); } //获取分钟 for (let i = 0; i < 60; i++) { if (i < 10) { i = "0" + i; } minutes.push("" + i); } Page({ /** * 页面的初始数据 */ data: { // 预计到店 time: '', multiArray: [years, months, days, hours, minutes], multiIndex: [0, 9, 16, 10, 17], choose_year: '', }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { //设置默认的年份 this.setData({ choose_year: this.data.multiArray[0][0] }) }, //获取时间日期 bindMultiPickerChange: function(e) { // console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ multiIndex: e.detail.value }) const index = this.data.multiIndex; const year = this.data.multiArray[0][index[0]]; const month = this.data.multiArray[1][index[1]]; const day = this.data.multiArray[2][index[2]]; const hour = this.data.multiArray[3][index[3]]; const minute = this.data.multiArray[4][index[4]]; // console.log(`${year}-${month}-${day}-${hour}-${minute}`); this.setData({ time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute }) // console.log(this.data.time); }, //监听picker的滚动事件 bindMultiPickerColumnChange: function(e) { //获取年份 if (e.detail.column == 0) { let choose_year = this.data.multiArray[e.detail.column][e.detail.value]; console.log(choose_year); this.setData({ choose_year }) } //console.log('修改的列为', e.detail.column, ',值为', e.detail.value); if (e.detail.column == 1) { let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); let temp = []; if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份 for (let i = 1; i <= 31; i++) { if (i < 10) { i = "0" + i; } temp.push("" + i); } this.setData({ ['multiArray[2]']: temp }); } else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份 for (let i = 1; i <= 30; i++) { if (i < 10) { i = "0" + i; } temp.push("" + i); } this.setData({ ['multiArray[2]']: temp }); } else if (num == 2) { //判断2月份天数 let year = parseInt(this.data.choose_year); console.log(year); if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) { for (let i = 1; i <= 29; i++) { if (i < 10) { i = "0" + i; } temp.push("" + i); } this.setData({ ['multiArray[2]']: temp }); } else { for (let i = 1; i <= 28; i++) { if (i < 10) { i = "0" + i; } temp.push("" + i); } this.setData({ ['multiArray[2]']: temp }); } } console.log(this.data.multiArray[2]); } var data = { multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; data.multiIndex[e.detail.column] = e.detail.value; this.setData(data); }, })
效果