Comment utiliser le sélecteur de date et d'heure de l'applet WeChat

Cet article présente principalement en détail comment utiliser le sélecteur de date et d'heure de l'applet WeChat. La personnalisation est précise en minutes, secondes ou périodes de temps. J'espère qu'elle pourra s'y référer. utile.

Rendu

Principe de mise en œuvre

Utilisation du composant sélecteur de l'applet WeChat Implémentation du sélecteur multi-colonnes !

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";

utilise une liaison à trois niveaux. style du sélecteur, alors importez-le directement !

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 du JS externe, 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
}

Résumé

• Mettez la liste d'initialisation et le tableau initialisé affichés par défaut dans dateTimePicker.js pour éviter que la logique de la page ne soit trop compliquée, et peut être utilisé à plusieurs endroits

• Pour déterminer s'il s'agit d'une année bissextile, dans l'expression Miki, il faut placer la divisibilité par 400 devant, car tant qu'une condition est remplie dans l'opération OR, elle retournera vrai et aucune exécution ultérieure ne sera effectuée Expression

• La méthode de fusion du cas de commutation doit faire attention au format

• Si seule la liste de liens doit être mise à jour, la deuxième colonne d'affichage des résultats ne sera pas mise à jour. Ensuite, seule la valeur de dateTimeArray est mise à jour dans la fonction changeDateTimeColumn.

Recommandations associées :

Tutoriel d'exemple de sélecteur de date d'écriture jquery

Sélection de date de l'interface utilisateur jQuery détaillée explication de Datepicker

Comment développer un sélecteur de date pour l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!