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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM