Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.