uniapp implements date and time picker

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:
  • Several usage scenarios of picker selectors in uniapp

<<:  XHTML language default CSS style

>>:  Analysis of the process of deploying nGrinder performance testing platform with Docker

Recommend

Does the % in the newly created MySQL user include localhost?

Normal explanation % means any client can connect...

In-depth explanation of Session and Cookie in Tomcat

Preface HTTP is a stateless communication protoco...

What kinds of MYSQL connection queries do you know?

Preface If the query information comes from multi...

Vue implements star rating with decimal points

This article shares the specific code of Vue to i...

Mysql implementation of full-text search and keyword scoring method example

1. Introduction Today a colleague asked me how to...

Detailed explanation of the process of installing msf on Linux system

Or write down the installation process yourself! ...

Specific method to add foreign key constraints in mysql

The operating environment of this tutorial: Windo...

Vue imitates ElementUI's form example code

Implementation requirements The form imitating El...

Vue3 + TypeScript Development Summary

Table of contents Vue3 + TypeScript Learning 1. E...

Shell script settings to prevent brute force ssh

The shell script sets access control, and the IP ...

A brief analysis of Linux network programming functions

Table of contents 1. Create a socket 2. Bind sock...

HTML page jump and parameter transfer issues

HTML page jump: window.open(url, "", &q...