入坑微信小程式必經之路(四)時間元件
阿新 • • 發佈:2021-09-04
<view class="pro-section"> <view class="selectTime"> <text style="float:left;margin-left:-30rpx;">申請時間:</text> <view class="section" style="float:left;width:30%;"> <picker mode="time" value="{{time}}" start="09:00" end="21:00" bindchange="bindTimeChange" id='startTime'> <!-- 在js中判斷所選picker的id為startTime時,將value賦值給startTime,放在input內 --> <view class="picker" style="margin-top:-2rpx;"> <input placeholder='開始時間' value='{{ApplyForStartTime}}' name="startTime"></input> </view> </picker> </view> </view> </view>
data:{ ApplyForStartTime:'', }, bindTimeChange: function(e){ if (e.currentTarget.id=="startTime") { this.setData({ApplyForStartTime:e.detail.value}); } },
const util = require("../../../utils/dateTimePicker");
下方為 :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 }