標籤
<picker mode="multiSelector" :value="dateTime1" @change="changeDateTime1" :range="dateTimeArray1">
<div class="tui-picker-detail">
{{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}}
{{dateTimeArray1[3][dateTime1[3]]}} :
{{dateTimeArray1[4][dateTime1[4]]}}
</div>
</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];
}
export function dateTimePicker(startYear,endYear,date) {
console.log('data',date);
// 返回默認顯示的數組和聯動數組的聲明
var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];
var start = startYear || 1978;
var end = endYear || 2100;
// 默認開始顯示數據
var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : 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.forEach((current,index) => {
dateTime.push(current.indexOf(defaultDate[index]));
});
return {
dateTimeArray: dateTimeArray,
dateTime: dateTime
}
}
import {dateTimePicker} from '../../../../../plugins/dateTimePicker';
data(){
return{
dateTimeArray1: null,
dateTime1: null,
startYear: 1949,
endYear: 2100,
}
},
methods:{
//修改時間時方法
changeDateTime1(e) {
this.dateTime1 = e.mp.detail.value;
let yyyy = this.dateTimeArray1[0][this.dateTime1[0]];
let mm = this.dateTimeArray1[1][this.dateTime1[1]];
let dd = this.dateTimeArray1[2][this.dateTime1[2]];
let hh = this.dateTimeArray1[3][this.dateTime1[3]];
let min = this.dateTimeArray1[4][this.dateTime1[4]];
let dateStr =`${yyyy}-${mm}-${dd} ${hh}:${min}`
let timestamp = new Date(dateStr).getTime();
this.form.crimeTime = timestamp;
},
//獲取當前時間
getCurrentTime(){
// 獲取完整的年月日 時分秒,以及默認顯示的數組
var obj = dateTimePicker(this.startYear, this.endYear, this.date);
// 精確到分的處理,將數組的秒去掉
var lastArray = obj.dateTimeArray.pop();
this.dateTimeArray1 = obj.dateTimeArray;
this.dateTime1 = obj.dateTime;
let yyyy = this.dateTimeArray1[0][this.dateTime1[0]];
let mm = this.dateTimeArray1[1][this.dateTime1[1]];
let dd = this.dateTimeArray1[2][this.dateTime1[2]];
let hh = this.dateTimeArray1[3][this.dateTime1[3]];
let min = this.dateTimeArray1[4][this.dateTime1[4]];
let dateStr =`${yyyy}-${mm}-${dd} ${hh}:${min}`
let timestamp = new Date(dateStr).getTime();
this.form.crimeTime = timestamp;
},
},
mounted(){
//獲取當前時間
this.getCurrentTime();
},