How to realize accurate date time selector in wechat applet

Time:2020-2-19

This article mainly introduces how to realize the precise date time selector in wechat applet. The example code is introduced in detail in this article, which has certain reference learning value for everyone’s study or work. You can refer to the following for your friends

statement

Bug: because this blog is dealing with the change of value in the bindcolumnchange event, it will appear that when you select, you do not click OK, and directly cancel returning, you will find that the value of the selection box is still changed.

Cause: This is caused by the value change processing in the bindcolumnchange event.

Processing method: if you need to change the value after confirmation, put the processing operations in the bindcolumnchange event into the bindchange event.

Design sketch

Realization principle

Using the multi column selector of the picker component of wechat applet!

WXML

<view>
 < View > time selector (select time) < View >
 <picker mode="time" value="{{time}}" start="09:00" end="17:30" bindchange="changeTime">
  <view>
   Lunch time: {time}} 
  </view>
 </picker>
</view>

<view>
 < View > date selector (select mm / DD / yyyy) < View >
 <picker mode="date" value="{{date}}" start="2017-10-01" end="2017-10-08" bindchange="changeDate">
  <view>
   National Day travel: {{date}}
  </view>
 </picker>
</view>

<view>
 < View > date time selector (accurate to seconds) < / View >
 <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
  <view>
   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]]}}}
  </view>
 </picker>
</view>
<view>
 < View > date time selector (accurate to minute) < / View >
 <picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
  <view>
   Select date time: {datetimearray1 [0] [datetime1 [0]]}} - {datetimearray1 [1] [datetime1 [1]]}} - {datetimearray1 [2] [datetime1 [2]]} {{datetimearray1 [3] [datetime1 [3]]}}: {{datetimearray1 [4] [datetime1 [4]]}}}
  </view>
 </picker>
</view>

JS

var dateTimePicker = require('../../utils/dateTimePicker.js');

Page({
 data: {
  date: '2018-10-01',
  time: '12:00',
  dateTimeArray: null,
  dateTime: null,
  dateTimeArray1: null,
  dateTime1: null,
  startYear: 2000,
  endYear: 2050
 },
 onLoad(){
  //Get the complete month, day, hour, minute, second, and the array displayed by default
  var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  //Processing accurate to minutes, 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 <= 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 = 'month format is incorrect, please re-enter! '
 }
 return array;
}
function getNewDateArry(){
 //Processing of current time
 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, seco];
}
function dateTimePicker(startYear,endYear,date) {
 //Returns the declaration of default display array and linkage array
 var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];
 var start = startYear || 1978;
 var end = endYear || 2100;
 //Default start data display
 var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
 //Processing linkage list data
 /*Mm / DD / yyyy HHM / S*/ 
 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);

 dateTimeArray.forEach((current,index) => {
  dateTime.push(current.indexOf(defaultDate[index]));
 });

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

summary

1. Put the initialization list and the initialization default display array into datetimepicker.js to prevent the page logic from being too messy and can be used in multiple places;

2. To determine whether it is a leap year, in the three wood expression, you must put the divisibility of 400 in the front, because or operation will return true as long as one condition is met, and no subsequent expression will be executed;

3. The merging method of switch case needs to pay attention to the format;

4. If you only need to update the linkage list, and the result display bar is not updated, only the value of datetimearray will be updated in the changedatetimecolumn function.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.