<template>
<div class="line-list line-list--indent">
	<div class="line-item">
		<input style="line-height:34px;" type="text" class="input-block" @click="showDatePicker" readonly v-model="date" placeholder="请选择出发日期" />
	</div>
</div>
<calendar
:visible="visibility"
:months="options.months"
:min-date="options.minDate" 
:max-date="options.maxDate" 
:selected-suffix="options.selectedSuffix" 
:selected-value="options.selectedValue"
@changed="change" 
@close="close" 
>
</calendar>

</template>


<script>
import calendar from "components/calendar/"

export default{
	data(){
		return{
			date:"",
			visibility:false,
			options:{
	 			"months":"50",
	 			"minDate":"2016-01-18",
	 			"maxDate":"2056-02-11",
	 			"selectedSuffix":"出发",
	 			"selectedValue":"2016-01-20"
	 		}
		}
	},
	components: {
		calendar
	},
	methods:{
		showDatePicker(){
			this.visibility=true;
		},
		change(item){
			this.date=item.date;
			this.options.selectedValue=item.date;
			this.close();
		},
		close(){
			this.visibility=false;
		}
	}
}
</script>