<template>
|
<view class="border-box">
|
<picker-view class="p5" v-if="visible" :value="value" @change="bindChange">
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
|
</picker-view-column>
|
</picker-view>
|
</view>
|
|
</template>
|
|
<script>
|
export default {
|
data() {
|
const date = new Date();
|
const years = [];
|
const year = date.getFullYear();
|
const months = [];
|
const month = date.getMonth() + 1;
|
const days = [];
|
const day = date.getDate();
|
const hours = [];
|
const hour = date.getHours();
|
const minutes = [];
|
const minute = date.getMinutes();
|
for (let i = date.getFullYear(); i <= date.getFullYear() + 10; i++) {
|
years.push(i);
|
}
|
for (let i = 1; i <= 12; i++) {
|
months.push(i);
|
}
|
for (let i = 1; i <= 31; i++) {
|
days.push(i);
|
}
|
for (let i = 1; i <= 24; i++) {
|
hours.push(i);
|
}
|
for (let i = 1; i <= 60; i++) {
|
minutes.push(i);
|
}
|
return {
|
title: 'picker-view',
|
years,
|
year,
|
months,
|
month,
|
days,
|
day,
|
hours,
|
hour,
|
minutes,
|
minute,
|
value: [0, month-1, day-1, hour, minute],
|
visible: true
|
};
|
},
|
created() {
|
this.emitFunc(this.value);
|
},
|
methods: {
|
/*选择触发*/
|
bindChange: function(e) {
|
const val = e.detail.value;
|
this.emitFunc(val);
|
},
|
|
emitFunc(val){
|
this.year = this.years[val[0]];
|
this.month = this.months[val[1]];
|
this.day = this.days[val[2]];
|
this.hour = this.hours[val[3]];
|
this.minute = this.minutes[val[4]];
|
this.$emit('get', this.year + '-' + this.month + '-' + this.day + ' ' + this.hour + ':' + this.minute);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.border-box{
|
border: 1rpx solid #CACACA;
|
}
|
picker-view {
|
width: 100%;
|
height: 216rpx;
|
text-align: center;
|
line-height: 70rpx;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
</style>
|
