96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<view style="">
|
||
|
|
<view class="" style="position: fixed;bottom: 0;background-color: rgba(0, 0,0, .5);top: 0;left: 0;right: 0;">
|
||
|
|
<view class="" style="position: absolute;bottom: 0;left: 0;right: 0; background-color: #FFFFFF;padding-top: 20rpx;">
|
||
|
|
<view class="disjbac pad-zy20">
|
||
|
|
<view @tap="chooseEv(0)" class="pad-sx10 pad-zy30 bacf5 radius10 col9">取消</view>
|
||
|
|
<view @tap="chooseEv(1)" class="pad-sx10 pad-zy30 pbackc radius10 colf">选择</view>
|
||
|
|
</view>
|
||
|
|
<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
|
||
|
|
<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 < 10 ? '0'+item : item}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="item" v-for="(item,index) in days" :key="index">{{item < 10 ? '0'+item : item}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="item">-</view>
|
||
|
|
</picker-view-column>
|
||
|
|
<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 < 10 ? '0'+item : item}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="item" v-for="(item,index) in days" :key="index">{{item < 10 ? '0'+item : item}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
</picker-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:"time-date",
|
||
|
|
data() {
|
||
|
|
const date = new Date()
|
||
|
|
const years = []
|
||
|
|
const year = date.getFullYear()
|
||
|
|
const months = []
|
||
|
|
const month = date.getMonth() + 1
|
||
|
|
const days = []
|
||
|
|
const day = date.getDate()
|
||
|
|
for (let i = 1990; i <= date.getFullYear(); i++) {
|
||
|
|
years.push(i)
|
||
|
|
}
|
||
|
|
for (let i = 1; i <= 12; i++) {
|
||
|
|
months.push(i)
|
||
|
|
}
|
||
|
|
for (let i = 1; i <= 31; i++) {
|
||
|
|
days.push(i)
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
title: 'picker-view',
|
||
|
|
years,
|
||
|
|
year,
|
||
|
|
months,
|
||
|
|
month,
|
||
|
|
days,
|
||
|
|
day,
|
||
|
|
value: [9999, month - 1, day - 1,9999, 9999 , month - 1, day - 1],
|
||
|
|
indicatorStyle: `height: 50px;`,
|
||
|
|
timestr:''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {},
|
||
|
|
methods:{
|
||
|
|
bindChange: function (e) {
|
||
|
|
const val = e.detail.value
|
||
|
|
this.timestr = `${this.years[val[0]]}-${this.months[val[1]] < 10 ? '0'+this.months[val[1]] : '0'+this.months[val[1]]}-${this.days[val[2]] < 10 ? '0'+this.days[val[2]] : this.days[val[2]]},${this.years[val[4]]}-${this.months[val[5]] < 10 ? '0'+this.months[val[5]] : this.months[val[5]]}-${this.days[val[6]] < 10 ? '0'+this.days[val[6]] : this.days[val[6]]}`
|
||
|
|
},
|
||
|
|
chooseEv(index){
|
||
|
|
this.$emit('chooseEv',{time:this.timestr,num:index});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.picker-view {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 600rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
.item {
|
||
|
|
height: 50px!important;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|