92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<view>
|
|
<view>
|
|
<picker style="color: rgb(51, 51, 51);font-weight: 400;padding: 6rpx;" :range="years" :value="echoVal" @change="yearChange" mode="multiSelector">
|
|
<view style="display: flex;align-items: center;font-size: 24rpx;">
|
|
<u-icon name="calendar" color="#aaa" size="20"></u-icon>
|
|
{{ years[0][yearsIndex1] }}年{{ years[1][yearsIndex2] }}月
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
// props: {
|
|
// years: {
|
|
// type: Array,
|
|
// default () {
|
|
// return []
|
|
// }
|
|
// },
|
|
// yearsIndex1: {
|
|
// type: Number,
|
|
// default: 0
|
|
// },
|
|
// yearsIndex2: {
|
|
// type: Number,
|
|
// default: 0
|
|
// },
|
|
// echoVal: {
|
|
// type: Array,
|
|
// default () {
|
|
// return []
|
|
// }
|
|
// },
|
|
// },
|
|
data() {
|
|
return {
|
|
years: [],
|
|
yearsIndex1: 0,
|
|
yearsIndex2: 0,
|
|
echoVal: [], //当前日期回显
|
|
}
|
|
},
|
|
// 页面加载
|
|
created() {
|
|
|
|
var date = new Date();
|
|
var year = date.getFullYear(); //获取完整的年份(4位)
|
|
var month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
|
|
var nowDay = date.getDate(); //获取当前日(1-31)
|
|
|
|
this.yearsIndex1 = year - 1500; //回显年
|
|
this.yearsIndex2 = month - 1; //回显月
|
|
|
|
let numbers = [];
|
|
for (let i = 1500; i <= 2999; i++) {
|
|
numbers.push(i);
|
|
}
|
|
var arr = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
|
|
|
|
this.years.push(numbers); //下拉组合
|
|
this.years.push(arr); //下拉组合
|
|
|
|
this.echoVal.push(year - 1500); //回显年
|
|
this.echoVal.push(month - 1); //回显月
|
|
|
|
this.$emit('chang',this.years[0][this.yearsIndex1]+''+this.years[1][this.yearsIndex2]);
|
|
|
|
|
|
},
|
|
methods: {
|
|
yearChange: function(e) {
|
|
// console.log(e)
|
|
//获得对象的 detail的 value
|
|
//通过数组的下标改变显示在页面的值
|
|
this.yearsIndex1 = e.detail.value[0];
|
|
this.yearsIndex2 = e.detail.value[1];
|
|
this.$emit('chang',this.years[0][this.yearsIndex1]+''+this.years[1][this.yearsIndex2]);
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |