How does WeChat Mini Programs realize the accurate date and time Selector
I would like to share with you how WeChat Mini Programs realizes the accurate date and time selector. I believe most people don't know much about it, so share this article for your reference. I hope you will learn a lot after reading this article. let's learn about it!
Statement
Bug: because this blog is a change in the value of the bindcolumnchange event, it will appear when you select, do not click OK, directly cancel to return, you will find that the value of the selection box still changes.
Cause: this is due to the value change handling done in the bindcolumnchange event.
How to handle it: if you need to determine and then change the value, put the handling action in the bindcolumnchange event into the bindchange event.
Effect picture
Realization principle
Use the multi-column selector of WeChat Mini Programs's picker component to achieve!
WXML
Time selector (choose time) lunch time: {{time}} date selector (choose year, month and day) National Day trip: {{date} date time selector (accurate to seconds) Select date time: {{dateTimeArray [0] [dateTime [0]]}}-{{dateTimeArray [1] [dateTime [1]]}-{{dateTimeArray [2] [dateTime [2]]}} {{dateTimeArray [3] [dateTime [3]]}}: {{dateTimeArray [4] [dateTime [4]]}: {{dateTimeArray [5] [dateTime [5]]}} date and time selector (accurate to minutes) Select date and time: {{dateTimeArray1 [0] [dateTime1 [0]]}}-{{dateTimeArray1 [1] [dateTime1 [1]]}}-{{dateTimeArray1 [2] [dateTime1 [2]]} {{dateTimeArray1 [3]} ] [dateTime1 [3]]}}: {{dateTimeArray1 [4] [dateTime1 [4]]}}
JS
Var dateTimePicker = require ('.. /.. / utils/dateTimePicker.js'); Page ({data: {date: '2018-10-01 hours, time:' 12 Page 00, dateTimeArray: null, dateTime: null, dateTimeArray1: null, dateTime1: null, startYear: 2000, endYear: 2050}, onLoad () {/ / get the full year, month, day, hour, second, and the array var obj = dateTimePicker.dateTimePicker (this.data.startYear, this.data.endYear) displayed by default Var obj1 = dateTimePicker.dateTimePicker (this.data.startYear, this.data.endYear); / / accurate to minute processing, removing the seconds of the array var lastArray = obj1.dateTimeArray.pop (); var lastTime = obj1.dateTime.pop (); this.setData ({dateTime: obj.dateTime, dateTimeArray: obj.dateTimeArray, dateTimeArray1: obj1.dateTimeArray, dateTime1: obj1.dateTime});}, changeDate (e) {this.setData ({date:e.detail.value}) }, changeTime (e) {this.setData ({time: e.detail.value});}, changeDateTime (e) {this.setData ({dateTime: e.detail.value});}, changeDateTime1 (e) {this.setData ({dateTime1: e.detail.value});}, changeDateTimeColumn (e) {var arr = this.data.dateTime, dateArr = this.data.dateTimeArray; arr [e.detail.column] = e.detail.value DateArr [2] = dateTimePicker.getMonthDay (dateArr [0] [arr [0]], dateArr [1] [arr [1]]); this.setData ({dateTimeArray: dateArr, dateTime: arr});}, changeDateTimeColumn1 (e) {var arr = this.data.dateTime1, dateArr = this.data.dateTimeArray1; arr [e.detail.column] = e.detail.value; dateArr [2] = dateTimePicker.getMonthDay (dateArr [0] [arr [0]], dateArr [1] [arr [1])) This.setData ({dateTimeArray1: dateArr, dateTime1: arr});})
Introduction of external 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 {dateTime.push (current.indexOf (defaultDate);}); return {dateTimeArray: dateTimeArray, dateTime: dateTime} module.exports = {dateTimePicker: dateTimePicker, getMonthDay: getMonthDay}
The above is all the contents of the article "how to achieve an accurate date and time selector for WeChat Mini Programs". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
