<style type="text/css">
	.datepicker table tr td span.disabled{
		 color: #ccc;
	}
</style>
<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="{active1:month===+m,disabled:isnot(m),month:'month'}" v-for="m in months" v-text="m" @click="selectMonth(m)"></span>
		</td>
		</tr>
	</tbody>
</table>
</div>
</template>
<script>
export default {
	props:["dateTime","mo","end"],
	data(){
		return {
			months:['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
		}
	},
	computed:{
		year() {
			return this.dateTime.year
		},
		month(){
			return this.dateTime.month+1
		}
	},
	methods:{
		prev() {
			this.currentMonth = ""
			this.dateTime.year-=1;
		},
		next() {
			this.currentMonth = ""
			this.dateTime.year+=1
		},
		selectMonth(value){
			if(this.isnot(value)){
				return
			}
			this.dateTime.month=+value-1
			this.mo=''
			this.dateTime._hasdefault=true
		},
		isnot(value){
			if(this.end){
				var _a=this.end.split('-');
				if(this.dateTime.year>_a[0]){
					return true;
				}
				if(+value>_a[1]){
					return true;
				}
			}
			return false;
		}
	},
	ready() {
		this.currentMonth = this.dateTime.month
	}
}
</script>