时间选择器禁用周一以外的和今天之前的

最新推荐文章于 2025-03-28 19:58:16 发布

君秋漠

最新推荐文章于 2025-03-28 19:58:16 发布

阅读量764

点赞数 1

分类专栏：项目中遇到的问题文章标签： ui css vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_44563526/article/details/126719399

版权

项目中遇到的问题专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element UI的时间选择器组件，并展示了如何设置禁用特定时间或日期的步骤。通过`pickerOptions`属性，可以自定义快捷方式并设定禁用条件，如禁用过去的时间或特定工作日。此外，还详细解释了如何获取开始和结束时间的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目遇到的问题

一、时间限制

示例：利用element-ui的时间选择器中，禁用某些时间
在这里插入图片描述

二、使用步骤

1.引入element UI

2.使用element UI

代码如下（示例）：

<template>
 <el-date-picker
  v-model="timeVal"  //双向绑定的值为数组形式
  type="daterange"
  align="right"
  unlink-panels
  @change="changeTime" //可以把值拆分成两个
  range-separator="至"
  value-format="yyyy-MM-dd"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions" //禁用某些值和其他条件
  >
</el-date-picker>
</template>

<style>
export default {
  data(){
   return {
  timeVal:'',
  starTime:'',
  endTime:'',
  pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        //禁用条件
        disabledDate(time) {
          return time.getTime() < new Date().getTime() || time.getDay() != 1;
        },
      },
   }
  },
  method:{
   changeTime() {
      this.startTime = this.timeVal[0];
      this.endTime = this.timeVal[1];
    },
  }
  
}
</style>

总结

提示：这里对文章进行总结：``提示：这里对文章进行总结：

1.因为本身他获取的是数组形式，所以获取开始/结束时间利用数组的下标就能获取。
2.:picker-options="pickerOptions"中有禁用选项，只用在里面添加你想禁用的条件就好，eg:
禁用周一的，time.getDay() != 1;
禁用今天之前的 time.getTime() < new Date().getTime()