微信小程序picker实时获取今明两天所有时间段选择

两天所有时间段选择"/>

微信小程序picker实时获取今明两天所有时间段选择

util.js

export function dataFormat(fmt) { //author: meizz // Format('yyyy-MM-dd HH:mm:ss')var o = {"M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 };if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;
}
export function getDay() { //author: meizz let dayList = ['周日','周一','周二','周三','周四','周五','周六']return dayList[this.getDay()]
}

// pages/home/confirmOrder/confirmOrder.js
// pages/home/confirmOrder/confirmOrder.js
const APP = getApp().globalData;
import { dataFormat, getDay } from '../../../utils/util'
Page({...APP,/*** 页面的初始数据*/data: {multiArray: [],	// 用作实时处理multiArray1:[],// 反应出来的数据 用作显示mult: [0,0,0],	// 用作实时处理mult1: [0,0,0] // 反应出来的数据},/*** 生命周期函数--监听页面加载*/setIndex() {let Hours,Minutes;let now = new Date()let yes = new Date(now.getTime() + 60 * 60 * 24 * 1000)let multiArray = [[{ key: '今天(' + getDay.call(now) + ')', value: dataFormat.call(now, 'yyyy-MM-dd') }, { key: '明天(' + getDay.call(yes) + ')', value: dataFormat.call(yes, 'yyyy-MM-dd') }]]if (this.data.mult[0] == 0) {Hours = now.getHours()Minutes = now.getMinutes()multiArray[1] = new Array(24 - Hours).fill().map((element, index) => {return { key: (Hours + index) < 10 ? ('0' + (index + Hours)) : (Hours + index), value: (Hours + index) < 10 ? ('0' + (index + Hours)) : (Hours + index) }})if (this.data.mult[1] == 0) {multiArray[2] = new Array(60 - Minutes).fill().map((element, index) => {return { key: (Minutes + index) < 10 ? ('0' + (index + Minutes)) : (Minutes + index), value: (Minutes + index) < 10 ? ('0' + (index + Minutes)) : (Minutes + index) }})} else {multiArray[2] = new Array(60).fill().map((element, index) => {return { key: (index) < 10 ? ('0' + (index)) : (index), value: (index) < 10 ? ('0' + (index)) : (index) }})}} else {multiArray[1] = new Array(24).fill().map((element, index) => {return { key: (index) < 10 ? ('0' + (index)) : (index), value: (index) < 10 ? ('0' + (index)) : (index) }})multiArray[2] = new Array(60).fill().map((element, index) => {return { key: (index) < 10 ? ('0' + (index)) : (index), value: (index) < 10 ? ('0' + (index)) : (index) }})}this.setData({multiArray,// mult})},onLoad: function (options) {this.setIndex()this.setData({multiArray1:this.data.multiArray})},pickercolumnchange({ detail: { column, value } }) {if (column == 0) {this.data.mult = [value, 0, 0]this.setData({mult:this.data.mult})this.setIndex()}if (column == 1 && this.data.mult[0] == 0) {this.data.mult = [this.data.mult[0], value, 0]this.setData({mult:this.data.mult})this.setIndex()}},pickerChange({ detail: { value } }) {this.setData({multiArray1:this.data.multiArray,mult1: value})},})

wxml’

<picker bindcolumnchange="pickercolumnchange" bindchange="pickerChange" value="{{mult}}"  mode="multiSelector" range-key="key" range="{{multiArray}}"><view style="padding-bottom:32rpx;border-bottom:1px solid rgba(240, 242, 245, 1)" class="aui-flex-col aui-flex-middle aui-flex-between"><view class="color_222">预约收货时间</view><view class='aui-flex-col aui-flex-middle aui-flex-between'><text class="color_FFB41F aui-font-size-14">{{multiArray1[0][mult[0]].key}} {{multiArray1[1][mult[1]].key}}:{{multiArray1[2][mult[2]].key}}送达</text><image class="aui-margin-l-5" style="width:18rpx" mode="widthFix" src="/image/right.png"></image></view></view>
</picker>