zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    20210131
    20210130
    20210129
    20210128
    20210127
    例3-7
    例3-5
    例3-4
    例3-3
    例3-2
  • 原文地址:https://www.cnblogs.com/ssjd/p/14210077.html
Copyright © 2011-2022 走看看