elementUI日期选择器里禁用选择未来时间

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

 

posted @ 2020-12-30 10:21  ssjd  阅读(3750)  评论(0编辑  收藏  举报