效果图:
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,并调取方法文章来源:https://www.toymoban.com/news/detail-685940.html
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 + s
console.log(arr, 'arr1111')
let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, arr)
console.log(obj, 'obj')
this.dateTimeArray = obj.dateTimeArray
this.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' + y
if (m < 10) m = '0' + m
if (d < 10) d = '0' + d
let dateArray = y + "-" + m + "-" + d + " " + value[3] + ":" + value[4] + ":" + value[5]
this.upTower = dateArray
this.formData.visitTime = dateArray
},
columnchange(e) {
console.log(e.detail.value, 'e.detail.value111')
let dateArr = this.dateTimeArray
let 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]])
//最后把最新的数值赋值到dateTimeArray
this.dateTimeArray = dateArr
this.dateTime = arr
},
}
参考链接地址;https://www.cnblogs.com/anna001/p/16903451.html文章来源地址https://www.toymoban.com/news/detail-685940.html
到了这里,关于uniapp的 picker 日期时间选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!