<template>
<div>
<div>
<span class="demonstration">航班日期范围开始-结束</span>
<el-date-picker :picker-options="pickerOptions"
:clearable="false"
v-model="flightDate"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<span class="demonstration">办理日期范围开始-结束</span>
<el-date-picker
v-model="projectDate"
:clearable="false"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd">
</el-date-picker>
<br>
<br>
<br>
<button @click="timeClick()">点击</button>
</div>
</template>
<script>
import Vue from 'vue'
import {DatePicker} from 'element-ui'
Vue.use(DatePicker)
export default {
name: "test",
data() {
return {
flightDate: '',
projectDate: '',
//禁用选择未来日期
pickerOptions: {
disabledDate(time) {
return time.getTime() >Date.now()
}
}
};
},
methods:{
timeClick(){
console.log(this.flightDate[0])
console.log(this.flightDate[1])
}
}
}
</script>
<style scoped>
</style>