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