mpvue---時間選擇器（年月日時分）

標籤 

<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();
    },