How to use the WeChat applet date and time picker

This article mainly introduces in detail how to use the WeChat applet date and time selector. The customization is accurate to minutes, seconds or time periods. It has certain reference value. Interested friends can refer to it

The example in this article shares the WeChat applet date and time picker accurate to seconds for your reference. The specific content is as follows

Rendering

Implementation principle

Use the multi-column selector of the picker component of the WeChat applet to implement!

WXML

<view class="tui-picker-content">
 <view class="tui-picker-name">时间选择器（选择时分）</view>
 <picker mode="time" value="{{time}}" start="09:00" end="17:30" bindchange="changeTime">
 <view class="tui-picker-detail">
  午饭时间: {{time}} 
 </view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">日期选择器（选择年月日）</view>
 <picker mode="date" value="{{date}}" start="2017-10-01" end="2017-10-08" bindchange="changeDate">
 <view class="tui-picker-detail">
  国庆出游: {{date}}
 </view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">日期时间选择器（精确到秒）</view>
 <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
 <view class="tui-picker-detail">
  选择日期时间: {{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 class="tui-picker-content">
 <view class="tui-picker-name">日期时间选择器（精确到分）</view>
 <picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
 <view class="tui-picker-detail">
  选择日期时间: {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}
 </view>
 </picker>
</view>

WXSS

@import "../picker/picker.wxss";

uses three The style of the cascading selector, so import it directly!

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(){
 // 获取完整的年月日 时分秒，以及默认显示的数组
 var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
 var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
 // 精确到分的处理，将数组的秒去掉
 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 ? &#39;0&#39; + param : &#39;&#39; + 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 &#39;01&#39;:
 case &#39;03&#39;:
 case &#39;05&#39;:
 case &#39;07&#39;:
 case &#39;08&#39;:
 case &#39;10&#39;:
 case &#39;12&#39;:
  array = getLoopArray(1, 31)
  break;
 case &#39;04&#39;:
 case &#39;06&#39;:
 case &#39;09&#39;:
 case &#39;11&#39;:
  array = getLoopArray(1, 30)
  break;
 case &#39;02&#39;:
  array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
  break;
 default:
  array = &#39;月份格式不正确，请重新输入！&#39;
 }
 return array;
}
function getNewDateArry(){
 // 当前时间的处理
 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) {
 // 返回默认显示的数组和联动数组的声明
 var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];
 var start = startYear || 1978;
 var end = endYear || 2100;
 // 默认开始显示数据
 var defaultDate = date ? [...date.split(&#39; &#39;)[0].split(&#39;-&#39;), ...date.split(&#39; &#39;)[1].split(&#39;:&#39;)] : getNewDateArry();
 // 处理联动列表数据
 /*年月日 时分秒*/ 
 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

• Put the initialization list and the array displayed by default in dateTimePicker.js to prevent the page logic from being too confusing, and it can be used in multiple places Use;

• to determine whether it is a leap year. In the Miki expression, divisibility by 400 must be placed in front, because the OR operation will return true as long as one condition is met, and it will not Execute subsequent expressions;

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

• If you only need to update the linkage list, the second result display column will not Update, only update the dateTimeArray value in the changeDateTimeColumn function.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to obtain mobile phone network status through WeChat applet [source code attached]

WeChat applet simulation Implementation of cookie

The above is the detailed content of How to use the WeChat applet date and time picker. For more information, please follow other related articles on the PHP Chinese website!