uniapp implements date and time picker

This article example shares the specific code of uniapp to implement the date and time picker for your reference. The specific content is as follows

Due to the needs of the project, I tried to use the Vant component library, but there were always problems, and the plug-ins in the plug-in market did not quite meet the needs. I looked up relevant information and the final result was as follows:

First, create a util folder in the root directory and put dateTimePicker.js

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 = 'The month format is incorrect, please re-enter! '
  }
  return array;
}
function getNewDateArry(){
  // Processing of current time year, month, day, hour, minute, and second 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];
}
function dateTimePicker(startYear,endYear,date) {
  // Return the default displayed array and linkage array declaration var dateTime = [], dateTimeArray = [[],[],[],[],[]];
  var start = startYear || 1978;
  var end = endYear || 2100;
 
 //Convert the passed string into an array let dataArr = date.split(" ")[0].split('/')
 let time = date.split(" ")[1].split(':')
  // Start displaying data by default. If a custom value is passed, the custom time will be used. Otherwise, the current time will be used...dataArr array deconstruction var defaultDate = date ? [...dataArr, ...time] : getNewDateArry();
 
  // Process linkage list data/*year month day hour minute second*/
  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);
 
 //Traverse the dateTimeArray array dateTimeArray.forEach((current,index) =>
  //Match the position of defaultDate[index] value in the current array dateTime.push(current.indexOf(defaultDate[index]))
  );

  return {
    dateTimeArray: dateTimeArray,
    dateTime: dateTime
  }
}
module.exports = {
  dateTimePicker: dateTimePicker,
  getMonthDay: getMonthDay
}

template

<picker mode="multiSelector" :range="dateTimeArray" v-model="dateTime" @change="change" @columnchange="columnchange">
 <view>
  //disable = "true" disables input to prevent the keyboard from popping up when clicked <input type="text" disabled="true" v-model="upTower" placeholder="Please select a time" placeholder-class="inputPlace" />
 </view>
</picker>

Script part

//Introduce the previously declared class const dateTimePicker = require('@/util/dateTimePicker.js')
 export default {
  data() {
   return {
    // Time selector dateTimeArray: null,
    dateTime: null,
    startYear: 2000,
    endYear: 2050,
   };
  },
  onLoad() {
   // Pass in the start year startYear and the end year endYear
   //Customize the start display time let arr = '2018/09/01 13:00'
   let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear,arr)
   this.dateTimeArray = obj.dateTimeArray
   this.dateTime = obj.dateTime
  },
  methods: {
   //Time format withData(param){
    return param < 10 ? '0' + param : '' + param;
   },
   change(e){
    let value = []
    e.detail.value.forEach((val,index) => {
     value.push(this.withData(val))
    })
    let dateArray = "20" + value[0] + "-" + value[1] + "-" + value[2] + " " + value[3] + ":" + value[4]
    this.upTower = dateArray
   },
   columnchange(e){
    let dateArr = this.dateTimeArray
    let arr = this.dateTime
    //Slide the data in the column and update its value arr[e.detail.column] = e.detail.value
    //Update the day of the month to display (28 or 29 or 30 or 31)
    dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
    //Finally assign the latest value to dateTimeArray
    this.dateTimeArray = dateArr
    this.dateTime = arr
   },

In the picker attribute: range = "dateTimeArray" = "dateTimeArray is a two-dimensional array. The length indicates the number of columns. Each item in the array indicates the data of each column . This is the key point of the multi-column selector display.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: