이 글에서는 WeChat 애플릿 날짜 및 시간 선택기를 사용하는 방법을 주로 소개합니다. 사용자 정의는 분, 초 또는 기간까지 정확합니다. 관심 있는 친구들이 참고할 수 있습니다.
이 글의 예는 다음과 같습니다. 귀하의 참고를 위해 WeChat 애플릿 날짜 및 시간 선택기를 초 단위로 공유했습니다. 구체적인 내용은 다음과 같습니다
Rendering
구현 원칙
선택기 구성 요소의 다중 열 선택 사용 WeChat 애플릿 구현!
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";
로그인 후 복사
은 3단계 연결 선택기 스타일을 사용하므로 직접 가져옵니다!
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
});
}
})로그인 후 복사
외부 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 = '月份格式不正确，请重新输入！'
}
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(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : 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
dateTimePicker.js에 초기화 목록과 기본적으로 표시되는 배열을 넣어 페이지 로직이 너무 지저분해지는 것을 방지하고, ;
윤년인지 판단하려면 미키식에서는 400으로 나누는 연도를 앞에 두어야 하는데, OR 연산에서 하나의 조건이 충족되면 true를 반환하기 때문입니다. 이후 표현식은 실행되지 않습니다.
스위치 케이스의 병합 방법은 형식에 주의해야 합니다.
링크 목록만 업데이트해야 하고 두 번째 결과 표시 열은 업데이트되지 않습니다. dateTimeArray 값은changeDateTimeColumn 함수에서 업데이트됩니다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
vue에서 정적 이미지를 동적으로 변경하고 네트워크 이미지를 요청하는 방법
vue에서 이미지와 데이터 반환 이미지 경로를 동적으로 바인딩하는 방법
Vue.set() 사용 방법 동적 실현 데이터에 대한 반응
위 내용은 WeChat 애플릿 개발에서 날짜 및 시간 선택기를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
