<view class="time-picker">
<picker
mode="multiSelector"
bindchange="bindTimeChange"
bindcolumnchange="bindColumnChange"
value="{{timeIndex}}"
range="{{timeArray}}"
>
<view class="picker-display">
{{defaultTime || defaultText}}
</view>
</picker>
</view>
.time-picker {
width: 100%;
}
.picker-display {
font-size: 30rpx;
}
/* 大屏适配 */
@media (min-width: 480px) {
.picker-display {
font-size: 20rpx;
}
}
@media (orientation: landscape) and (min-width: 992px),
(min-width: 1100px) {
.picker-display {
font-size: 16px;
}
}
Component({
options: {
multipleSlots: true
},
properties: {
defaultTime: {
type: String,
value: ''
},
defaultText: {
type: String,
value: '请选择时间'
}
},
data: {
timeArray: [],
timeIndex: [0, 0, 0, 0, 0, 0],
},
lifetimes: {
attached() {
this.initTimeData();
setTimeout(() => {
const { defaultTime } = this.properties;
if (defaultTime) {
this.setTimeByDefault(defaultTime);
}
}, 100);
}
},
methods: {
initTimeData() {
const now = new Date();
const year = now.getFullYear() + 5;
const years = this.createRangeArr(1900, year);
const months = this.createRangeArr(1, 12);
const days = this.getDaysByYearMonth(1900, 1);
const hours = this.createRangeArr(0, 23);
const minutes = this.createRangeArr(0, 59);
const seconds = this.createRangeArr(0, 59);
this.setData({
timeArray: [years, months, days, hours, minutes, seconds]
});
},
createRangeArr(start, end) {
const arr = [];
for (let i = start; i <= end; i++) {
let val = i < 10 ? `0${i}` : `${i}`;
arr.push(val);
}
return arr;
},
getDaysByYearMonth(year, month) {
const y = +year;
const m = +month;
const day31 = [1, 3, 5, 7, 8, 10, 12];
const day30 = [4, 6, 9, 11];
let days;
if (day31.includes(m)) {
days = 31;
} else if (day30.includes(m)) {
days = 30;
} else {
days = (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0 ? 29 : 28;
}
return this.createRangeArr(1, days);
},
bindTimeChange(e) {
const val = e.detail.value;
const arr = this.data.timeArray;
const y = arr[0][val[0]];
const m = arr[1][val[1]];
const d = arr[2][val[2]];
const hh = arr[3][val[3]];
const mm = arr[4][val[4]];
const ss = arr[5][val[5]];
const timeValue = `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
this.setData({
timeIndex: val,
defaultTime: timeValue
});
this.triggerEvent('change', {
time: timeValue
});
},
bindColumnChange(e) {
const col = e.detail.column;
const val = e.detail.value;
let { timeArray, timeIndex } = this.data;
timeIndex[col] = val;
if (col === 0 || col === 1) {
const y = timeArray[0][timeIndex[0]];
const m = timeArray[1][timeIndex[1]];
const newDays = this.getDaysByYearMonth(y, m);
timeArray[2] = newDays;
timeIndex[2] = 0;
}
this.setData({ timeArray, timeIndex });
},
setTimeByDefault(timeStr) {
if (!timeStr) return;
try {
const [date, time] = timeStr.split(' ');
const [y, m, d] = date.split('-');
const [hh, mm, ss] = time.split(':');
const { timeArray } = this.data;
const years = timeArray[0];
const months = timeArray[1];
const days = this.getDaysByYearMonth(y, m);
const hours = timeArray[3];
const minutes = timeArray[4];
const seconds = timeArray[5];
// 直接匹配纯数字,不需要拼接单位
const yIndex = years.findIndex(t => t == y);
const mIndex = months.findIndex(t => t == m);
const dIndex = days.findIndex(t => t == d);
const hhIndex = hours.findIndex(t => t == hh);
const mmIndex = minutes.findIndex(t => t == mm);
const ssIndex = seconds.findIndex(t => t == ss);
const newIndex = [yIndex, mIndex, dIndex, hhIndex, mmIndex, ssIndex];
this.setData({
'timeArray[2]': days,
timeIndex: newIndex
});
} catch (err) {
console.error('时间默认值设置失败', err);
}
},
}
});
微信版本:
