uniapp的 picker 日期时间选择器

效果图：

dateTimePicker.js

function withData(param){return param < 10 ? '0' + param : '' + param;
}
function getLoopArray(start,end){var start = start || 0;var end = end || 1;var array = [];for (var i = start; i <= end; i++) {array.push(withData(i));}return array;
}
function getMonthDay(year,month){var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;switch (month) {case '01':case '03':case '05':case '07':case '08':case '10':case '12':array = getLoopArray(1, 31)break;case '04':case '06':case '09':case '11':array = getLoopArray(1, 30)break;case '02':array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)break;default:array = '月份格式不正确，请重新输入！'}return array;
}
function getNewDateArry(){// 当前时间的处理 年月日时分秒var newDate = new Date();var year = withData(newDate.getFullYear()),mont = withData(newDate.getMonth() + 1),date = withData(newDate.getDate()),hour = withData(newDate.getHours()),minu = withData(newDate.getMinutes());seco = withData(newDate.getSeconds());return [year, mont, date, hour, minu,seco];
}
function dateTimePicker(startYear,endYear,date) {// 返回默认显示的数组和联动数组的声明var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];var start = startYear || 1978;var end = endYear || 2100;//处理传过来的字符串转化为数组let dataArr = date.split(" ")[0].split('/')let time = date.split(" ")[1].split(':')// 默认开始显示数据 如果把自定义值传过来的话就使用自定义时间 否则用当前时间  ...dataArr数组解构var defaultDate = date ? [...dataArr, ...time] : getNewDateArry();// 处理联动列表数据/*年月日 时分秒*/dateTimeArray[0] = getLoopArray(start,end);dateTimeArray[1] = getLoopArray(1, 12);dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);dateTimeArray[3] = getLoopArray(0, 23);dateTimeArray[4] = getLoopArray(0, 59);dateTimeArray[5] = getLoopArray(0, 59);//遍历dateTimeArray数组dateTimeArray.forEach((current,index) =>{//匹配defaultDate[index]值在current数组中的位置dateTime.push(current.indexOf(defaultDate[index]))});return {dateTimeArray: dateTimeArray,dateTime: dateTime}
}
module.exports = {dateTimePicker: dateTimePicker,getMonthDay: getMonthDay
}

需要用到的页面中

			<view class="login-Form"><view class="label">进场时间<text class="required">*</text></view><picker class="warning-input" mode="multiSelector" :range="dateTimeArray" v-model="dateTime"@change="change" @columnchange="columnchange"><view class="inp-box" style="margin-left: 18px;"><input type="text" disabled="true" v-model="upTower" placeholder="请选择"placeholder-class="inputPlace" /></view></picker></view>

引入js，并调取方法

const dateTimePicker = require('@/pagesSitePurchase/sitePurchase/dateTimePicker.js')export default {data() {return {dateTimeArray: [],dateTime: "",upTower:""}},onLoad(e) {let date = new Date()let	Y = date.getFullYear() + '/'let	M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'// let	D = date.getDate() + ' 'let	D = date.getDate()< 10 ? ('0' + date.getDate() + ' ') : (date.getDate() + ' ')let	h = date.getHours()< 10 ? ('0' + date.getHours() + ':') : (date.getHours() + ':')let	m = date.getMinutes()< 10 ? ('0' + date.getMinutes() + ':') : (date.getMinutes() + ':')let	s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()// h = '00' + ':',// m = '00' + ':',// s = '00';let arr = Y + M + D + h + m + sconsole.log(arr, 'arr1111')let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, arr)console.log(obj, 'obj')this.dateTimeArray = obj.dateTimeArraythis.dateTime = obj.dateTime},methods: {//时间格式化withData(param) {return param < 10 ? '0' + param : '' + param;},change(e) {let value = []e.detail.value.forEach((val, index) => {value.push(this.withData(val))})let allYear = this.dateTimeArray[0]let y = allYear[Number(value[0])];let m = Number(value[1]) + 1;let d = Number(value[2]) + 1;if (y < 10) y = '0' + yif (m < 10) m = '0' + mif (d < 10) d = '0' + dlet dateArray = y + "-" + m + "-" + d + " " + value[3] + ":" + value[4] + ":" + value[5]this.upTower = dateArraythis.formData.visitTime = dateArray},columnchange(e) {console.log(e.detail.value, 'e.detail.value111')let dateArr = this.dateTimeArraylet arr = this.dateTime//滑动所在列的数据并对其值进行更新arr[e.detail.column] = e.detail.value//更新展示月份对应的天数（28 or 29 or 30 or 31）dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])//最后把最新的数值赋值到dateTimeArraythis.dateTimeArray = dateArrthis.dateTime = arr},}

参考链接地址；https://www.cnblogs.com/anna001/p/16903451.html