<template>
<div class="datepicker-months vue-show-imo">
<table class=" table-condensed">
	<thead>
	<tr>
	<th class="prev" @click="prev">
		<i class="fa fa-chevron-left fi-arrow-left"></i>
	</th>
	<th colspan="5" class="date-switch">{{year}}</th>
	<th class="next" @click="next">
		<i class="fa fa-chevron-right fi-arrow-right"></i>
	</th>
	</tr>
	</thead>
	<tbody>
		<tr>
		<td colspan="7" >
			<span class="month" v-for="month in months" v-text="month" @click="selectMonth(month)"></span>
		</td>
		</tr>
	</tbody>
</table>
</div>
</template>
<script>
export default {
	props:["dateTime","mo"],
	data(){
		return {
			months:['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
		}
	},
	computed:{
		year() {
			return this.dateTime.year
		}
	},
	methods:{
		prev() {
			this.currentMonth = ""
			this.dateTime.year-=1;
		},
		next() {
			this.currentMonth = ""
			this.dateTime.year+=1
		},
		selectMonth(value){
			this.dateTime.month=+value-1
			this.mo=''
		}
	},
	ready() {
		this.currentMonth = this.dateTime.month
	}
}
</script>