elementUI时间选择器禁用未来时间

加倍_

已于 2022-08-19 14:29:59 修改

阅读量2k

点赞数

分类专栏： vue2 文章标签： vue

于 2021-06-30 15:53:12 首次发布

本文链接：https://blog.csdn.net/qq_49277509/article/details/118362758

版权

又是一个组件库的问题，要想后台写的好，element-ui必须要熟悉啊，这不，今天就遇到问题了

问题描述：项目需求是只允许用户查找过去的历史记录，就意味着不可以选择以后的时间，要求，从今天往后的时间颜色要置成灰色。

    <el-date-picker
              :clearable="false"
              style="width: 290px"
              v-model="date"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            ></el-date-picker>

  data() {
   
    return {
   
     pickerOptions: options,     
     date:"",
     date2:"",
    };
  },

我这里引入了一个模块去处理时间这方面

import {
    options } from "./data.js";

export const options = {
   
// 只能选择过去的时间
  disabledDate(time) {
   
    return  time.getTime() > Date.now();
  },
  shortcuts: [
    {
   
      text: '今天',
      onClick(picker) {
   
        console.log(picker);
        const end = new Date()