<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>