• 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>
  • 相关阅读:
    JS 函数—函数内部:arguments、this、,caller、new.target
    JS—函数概述
    Number API
    Object-API—02
    03构建之法阅读笔记之一
    4月第二次每周总结(4月15日)
    电梯演讲
    个人作业3—折线图
    个人作业3—china.jsp设置页面
    每周总结(4月8日)
  • 原文地址:https://www.cnblogs.com/ssjd/p/14210077.html
Copyright © 2020-2023  润新知