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:
|
<<: XHTML language default CSS style
>>: Analysis of the process of deploying nGrinder performance testing platform with Docker
Table of contents 1. First, use pycharm to create...
Normal explanation % means any client can connect...
Preface HTTP is a stateless communication protoco...
Preface If the query information comes from multi...
This article shares the specific code of Vue to i...
1. Introduction Today a colleague asked me how to...
Or write down the installation process yourself! ...
1. Install MySQL database ① Download and unzip an...
The operating environment of this tutorial: Windo...
Implementation requirements The form imitating El...
Table of contents Vue3 + TypeScript Learning 1. E...
The shell script sets access control, and the IP ...
The plugin is installed in the Firefox browser. T...
Table of contents 1. Create a socket 2. Bind sock...
HTML page jump: window.open(url, "", &q...