el-date-picker设置只有某些日期可选

news2024/11/25 2:40:57

示例图:

<el-date-picker
   v-model="topFormObj.upTime"
   type="date"
   value-format="timestamp"
   format="dd/MM/yyyy"
   :picker-options="pickerOptions"
/>

固定限制每周的周末+周三不可选

data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          // 使用getDay()方法获取星期几
          return time.getDay() === 6 || time.getDay() === 0 || time.getDay() === 3
        }
      }
    }
}

根据接口返回的日期时间戳设置只有某些日期可选

假设接口返回只有07/10/2024和09/10/2024这两天可以选择,并且返回的时间戳并非0点的。

首先利用new Date(时间戳).setHours(0, 0, 0, 0)方法将时间戳转化为0点的时间戳。

const tt = [new Date(1728440229000).setHours(0, 0, 0, 0), new Date(1728267429000).setHours(0, 0, 0, 0)]

data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return !tt.includes(time.getTime())
        }
      }
    }
}

限制只能选当月或者以后的月份(包括未来的年份),禁止选过去的月份(包括过去的年份)

<el-date-picker
    v-model="topFormObj.upTime"
    type="month"
    value-format="timestamp"
    format="dd/MM/yyyy"
    :picker-options="pickerOptions"
/>
data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          var now = new Date()
          now.setHours(0, 0, 0, 0)
          return time.getTime() < now.getTime()
        }
      }
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2210978.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Leetcode 乘积最大子数组

该算法的目的是求出一个整数数组中乘积最大的连续子数组。 算法思想&#xff1a; 问题分析&#xff1a; 我们需要在数组中找到连续的子数组&#xff0c;使得该子数组的乘积最大。这个问题类似于“最大子序和”&#xff0c;但乘积相比求和有更多的复杂性&#xff0c;特别是当数…

销售管理的五大职能

什么是销售管理 销售管理&#xff0c;这一看似简单的概念&#xff0c;实则蕴含着丰富的内涵与细致的操作。它不仅仅是对销售团队的监督和对客户满意度的追求&#xff0c;更是通过一系列策略和手段&#xff0c;优化销售流程&#xff0c;提升业务成果的过程。 销售管理的内核 …

electron本地OCR实现

使用tesseract.js - npm (npmjs.com) 官方demo&#xff1a;GitHub - Balearica/tesseract.js-electron: An example to use tesseract.js in electron 目录结构&#xff1a; async function ocr() {const worker await Tesseract.createWorker("chi_sim", 1, {wor…

前端打印功能(vue +springboot)

后端 后端依赖生成pdf的方法pdf转图片使用(用的打印模版是带参数的 ,参数是aaa)总结 前端页面 效果 后端 依赖 依赖 一个是用模版生成对应的pdf,一个是用来将pdf转成图片需要的 <!--打印的--><dependency><groupId>net.sf.jasperreports</groupId>&l…

探索 YOLO11:更快、更智能、更高效

点击下方卡片&#xff0c;关注“小白玩转Python”公众号 在人工智能这个不断进化的世界中&#xff0c;有一件事我们可以肯定&#xff1a;模型不断变得更好、更快、更智能。就在你以为 YOLO 系列已经达到顶峰时&#xff0c;Ultralytics 推出了最新升级——YOLO11。没错&#xff…

K-means 聚类算法:目标函数推导、迭代过程及可视化解析

一、K-means 的背景 在机器学习领域&#xff0c;许多任务涉及 训练模型来做预测或分类 。比如&#xff0c;医生可能希望通过以往的病例数据来预测某个病人未来是否会患上某种疾病&#xff0c;或者新闻网站可能需要根据文章的主题将新闻自动分类。这些任务通常依赖于有标签的数…

Qt之TCP收发图片的例子

一.效果 二.实现 1.发图片 void MainWindow::slotSendImage() {matrix.rotate(90);QPixmap tempPixmap = pixmap.transformed(matrix);QBuffer buffer;tempPixmap.save(&buffer,"jpg");ui->labelImage->setPixmap(tempPixmap);int dataLength = buffer.d…

UE4 材质学习笔记09(雨水水坑着色器/完整雨水着色器)

一.雨水水坑着色器 要用到这样一个噪声贴图&#xff0c;我们要做的就是&#xff0c;做出水坑并让水坑在这种浑浊的噪点中产生&#xff0c;因此水坑将从最暗的斑点生长&#xff0c;然后随着它继续占据越来越亮的像素而生长 现在水坑将从上到下投射到世界空间中&#xff0c;所以…

C++:模拟priority_queue

目录 priority_queue的介绍 概念 特点 priority_queue的使用 基本操作 演示代码 ​编辑 priority_queue的模拟实现 仿函数 向上调整和向下调整 模拟实现的代码 priority_queue的介绍 概念 在C标准库中&#xff0c;priority_queue是一个基于优先级堆的容器适配器。…

设计感十足的喇叭裤来咯,亲子款get~

微喇叭的设计&#xff0c;时尚感爆棚&#xff0c;瞬间让宝贝成为冬日里的小潮人。而且这种设计非常显瘦&#xff0c;能够很好地修饰宝贝的腿型&#xff0c;穿上秒变大长腿。表面磨毛质感&#xff0c;摸起来舒软绒顺&#xff0c;温柔气质&#xff0c;下脚隐形拉链&#xff0c;拉…

如何通过 Nginx 只允许 www 域名访问并禁止裸域名访问

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

learn C++ NO.23——map、set的模拟实现

STL库的实现方式 map和set的底层用的红黑树是一样的吗&#xff1f;从容器特点的角度出发&#xff0c;这里个容器的底层应该分别用key搜索模型的红黑树和key value 搜索模型的红黑树。但是&#xff0c;从库的设计角度出发&#xff0c;这两者用同一份红黑树代码更好。而STL就是用…

第十五章 RabbitMQ延迟消息之延迟插件

目录 一、引言 二、延迟插件安装 2.1. 下载插件 2.2. 安装插件 2.3. 确认插件是否生效 三、核心代码 四、运行效果 五、总结 一、引言 上一章我们讲到通过死信队列组合消息过期时间来实现延迟消息&#xff0c;但相对而言这并不是比较好的方式。它的代码实现相对来说比…

Java->排序

目录 一、排序 1.概念 2.常见的排序算法 二、常见排序算法的实现 1.插入排序 1.1直接插入排序 1.2希尔排序(缩小增量法) 1.3直接插入排序和希尔排序的耗时比较 2.选择排序 2.1直接选择排序 2.2堆排序 2.3直接选择排序与堆排序的耗时比较 3.交换排序 3.1冒泡排序…

你知道C++多少——继承

&#x1f308;个人主页&#xff1a;小新_- &#x1f388;个人座右铭&#xff1a;“成功者不是从不失败的人&#xff0c;而是从不放弃的人&#xff01;”&#x1f388; &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd; &#x1f3c6;所属专栏&#xff1…

蓝桥杯模块三:蜂鸣器和继电器的基本控制

模块训练题目&#xff1a; 一、蜂鸣器电路图 1.电路图 2.电路分析 138译码器控制Y5,Y5控制Y5C&#xff0c;Y5C低电平控制芯片开启P0口控制ULN2003继而控制蜂鸣器端口和继电器端口 二、程序代码 1.138译码器控制端口函数 建立初始化函数选择锁存器 2.实现题目功能 在LED代…

24-10-13-读书笔记(二十五)-《一只特立独行的猪》([中] 王小波)用一生来学习艺术

文章目录 《一只特立独行的猪》&#xff08;[中] 王小波&#xff09;目录阅读笔记记录总结 《一只特立独行的猪》&#xff08;[中] 王小波&#xff09; 十月第五篇&#xff0c;放慢脚步&#xff0c;秋季快要过去了&#xff0c;要步入冬季了&#xff0c;心中也是有些跌宕起伏&am…

Guitar Pro怎么制作伴奏谱,吉他谱制作软件guitar pro教程

在诸多教学吉他谱制作软件中Guitar Pro是一款非常优秀的软件&#xff0c;它是专为吉他和其他弦乐器设计&#xff0c;且能提供乐谱编辑、音轨录制和播放、和弦与音阶库等功能的强大软件。Guitar Pro不仅具有强大的乐谱编辑功能&#xff0c;其用户界面也易于上手&#xff0c;更支…

ThingsBoard规则链节点:Script节点详解

引言 脚本节点简介 用法 含义 应用场景 实际项目运用示例 智能楼宇管理系统 工业自动化生产线 结论 引言 ThingsBoard是一个功能强大的物联网平台&#xff0c;它支持设备管理、数据收集与处理以及实时监控。其核心组件之一是规则引擎&#xff0c;允许用户定义复杂的业务…

vue特效,一片动态星空

vue实现漂亮星空&#xff0c;超级简单 1.创建vue项目&#xff1a; vue create demo 2.注册vuecli : npm i element-ui -S 3.加载依赖 &#xff1a;npm i 4.运行项目 :npm run serve <!DOCTYPE html> <html lang"en"> <head><…