微信小程式如何實現精確的日期時間選擇器
阿新 • • 發佈:2020-01-22
這篇文章主要介紹了微信小程式如何實現精確的日期時間選擇器,文中通過示例程式碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
宣告
bug:由於此篇部落格是在bindcolumnchange事件中做的值的改變處理,因此會出現當你選擇時,沒有點選確定,直接取消返回後,會發現選擇框的值依然改變。
造成原因:這一點就是由於在bindcolumnchange事件做的值改變處理造成。
處理方法:如果需要確定後再改變值,請將bindcolumnchange事件中的處理操作放到bindchange事件中。
效果圖
實現原理
利用微信小程式的picker元件的多列選擇器實現!
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>
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 }
總結
1、將初始化列表以及初始化預設顯示的陣列放到dateTimePicker.js,防止頁面邏輯太亂,而且可以多處使用;
2、判斷是否為閏年,在三木表示式中,必須將能別400整除放在前邊,因為或運算只要一個條件滿足,就會返回true,不會執行後續表示式;
3、switch case的合併方法需要注意格式;
4、如果只需要聯動列表更新,二結果展示欄不更新,則在changeDateTimeColumn函式中只更新dateTimeArray的值。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。