Vue 中使用 el-date-picker 限制只能選擇當天、當天之前或當天之后日期的方法詳解

網上很多都是不完整的,我這里發布一個完整的

- 8.64e7?表示可選擇當天時間(注:小于當前時間,- 8.64e7 則是禁用日期不包含當前日,若大于當前日期, 8.64e7 則是禁用日期包含當前日)

time.getTime() < Date.now() - 8.64e7??禁用日期不包含當前日

time.getTime() > Date.now() - 8.64e7??禁用日期包含當前日

1.只能選擇當日

<el-date-pickerformat="yyyy 年 MM 月 dd 日"value-format="yyyy-MM-dd"v-model="ruleForm.shenqingshijian"type="date":picker-options="pickerOptions"placeholder="申請時間">
</el-date-picker><script>
export default {data() {return {selectedDate: null,pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() || (time.getTime() < Date.now() - 8.64e7); }, },};},
};
</script>


2.限制只能選擇當天之前的日期? ? ? ? ? ? ? ? ? ? ? ??

<template><div><el-date-pickerv-model="selectedDate":picker-options="pickerOptions"></el-date-picker></div>
</template><script>
export default {data() {return {selectedDate: null,pickerOptions: {disabledDate(time) {return time.getTime() > Date.now();},},};},
};
</script>

3.限制只能選擇當天之后的日期

<template><div><el-date-pickerv-model="selectedDate":picker-options="pickerOptions"></el-date-picker></div>
</template><script>
export default {data() {return {selectedDate: null,pickerOptions: {disabledDate(time) {return time.getTime() < Date.now();},},};},
};
</script>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/10135.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/10135.shtml
英文地址,請注明出處:http://en.pswp.cn/web/10135.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

c++ 讀寫鎖的理解

1.概要 讀寫鎖的理解 讀的時候&#xff0c;只要是讀的線程都不受限制&#xff0c;但不能寫。 寫的時候&#xff0c;線程獨占&#xff0c;任何寫和讀的線程都不可以。 最初我以為&#xff0c;只有限制寫就可以了&#xff0c;讀完全不受現在&#xff0c;但是有可能讀到不完整的…

【初始類和對象】(實例講解!超級詳細!)

【初始類和對象】 前言1. 面向對象的初步認知1.1什么是面向對象1.2 面向對象與面向過程 2. 類的定義和使用2.1 簡單認識類2.2 類的定義格式 3. 知識的代碼舉例講解3.1 創建類、實例化類3.2 構造方法初始化類、this 3. 總結 前言 由于類和對象是我們在學習過程中需要接受的概念…

AI賦能未來教育:中國教學科研新藍圖

設“人啊 前言 回顧過去&#xff0c;傳統的教育模式以知識灌輸和應試為主&#xff0c;雖培養出大量人才&#xff0c;但也存在著學生創新能力不足、實踐經驗缺乏等問題。隨著時代的進步和科技的發展&#xff0c;傳統教育模式已難以滿足當今社會對人才的需求。然而&#xff0c;當…

LoadIncrementalHFiles 流程和原理

目錄 1. HBase Bulk Load 簡介 2. 流程 3. 原理 4. 使用注意事項 5.補充說明之"什么是移動文件" 1. HBase Bulk Load 簡介 LoadIncrementalHFiles是用于HBase的Bulk Load工具&#xff0c;允許用戶高效地將大量數據直接加載到HBase表中&#xff0c;而不是使用傳…

中國現代十大杰出人物顏廷利:好的司機不如好的同機

找好‘同機’者, 要比找好‘司機’者, 原因就是, ‘司機’雖好, 但不是‘同路人’, 再多努力的攀附都是徒勞, 至于‘同機’者, 即便是對方在自己的眼里心中都一無是處, 只不過, 他/她才是您旅途之中, 真真正正、風雨同舟的人…(升命學說) 21世紀東方哲學家思想家、科學家、當代…

孩子學編程和不學編程的差距?

隨著信息技術的飛速發展&#xff0c;編程已經成為一項非常重要的技能&#xff0c;不僅僅是在計算機領域&#xff0c;而且在各個行業都有著廣泛的應用。因此&#xff0c;讓孩子學習編程已經成為很多家長的選擇。那么&#xff0c;孩子學習編程和不學習編程之間有哪些差距呢&#…

TODESK遠控快捷鍵在哪里

在當今高度數字化的世界中&#xff0c;遠程工作和協作已經成為日常生活和業務運營的重要組成部分。Todesk作為一款出色的遠程協作軟件&#xff0c;為用戶提供了諸多功能&#xff0c;以確保流暢、高效的遠程連接體驗。其中&#xff0c;快捷鍵功能極大地提升了用戶的操作便捷性。…

高速、簡單、安全的以太彩光,銳捷網絡發布極簡以太全光 3.X 方案

從 2021 年 3 月正式推出到現在&#xff0c;銳捷網絡極簡以太全光方案已經走進第四個年頭。IT 仍在不斷向前發展&#xff0c;數字化進程深入&#xff0c;數字化業務增多&#xff0c;更廣泛的終端設備接入企業級園區網絡&#xff0c;對園區網絡提出了更高的要求&#xff0c;例如…

GDB斷點執行的次數

需求背景&#xff1a;條件斷點可能執行多次&#xff0c;但是可能在最后一次執行引發了后續的問題&#xff0c;但是斷點位置并非問題現場&#xff0c;如何使得斷點在最后一次停下來&#xff1f; 方法&#xff1a; 1.首先設置條件斷點 (gdb) b (gdb) cond breakpoint_number…

Linux NFS共享目錄配置漏洞

Linux NFS共享目錄配置漏洞 一、實驗目的二、實驗原理三、復現準備四、漏洞復現4.1、復現前提4.2、正式復現 一、實驗目的 利用 NFS共享目錄配置漏洞讀取目標主機的 /etc/passwd 文件內容NFS 服務配置漏洞&#xff0c;賦予了根目錄遠程可寫權限&#xff0c;導致 /root/.ssh/au…

關系型數據庫VS非關系型數據庫

數據庫是存儲和組織數據的系統&#xff0c;主要分為兩大類&#xff1a; 關系型數據庫&#xff08;Relational Database Management Systems, RDBMS&#xff09; 非關系型數據庫&#xff08;NoSQL Databases&#xff09; 下面分別介紹這些類型及其區別&#xff1a; 關系型數…

im8mm 網絡卡死 Rx packets:1037578 errors:66 dropped:0 overruns:66 frame:0

1&#xff1a;網絡接收數據包異常 2&#xff1a;問題復現 問題在進行網絡數據包同吞吐量測試的時候出現的。同時發現&#xff0c;在使用iperf2測試時&#xff0c;是不會出現網絡中斷卡死的情況&#xff0c;使用 iperf3時才會出現此問題 指令(下面的指令運行在PC2上面&#xff…

AGV混合型電機驅動器|伺服控制器CNS-MI50H系列對電機的要求

混合型電機驅動器 CNS-MI50H系列涵蓋CNS-MI50HB-A、CNS-MI50HBN-A、CNS-MI50HDN-A、CNS-MI50HSN-A型號&#xff0c;專為 AGV 舵輪控制需求設計&#xff0c;集成舵輪轉向角度控制和驅動電機閉環控制。支持增量式編碼器&#xff0c;霍爾傳感器&#xff0c; 角度電位計&#xff0c…

自動化測試基礎 --- Jmeter

前置環境安裝 首先我們需要知道如何下載Jmeter 這里貼上下載網站Apache JMeter - Download Apache JMeter 我們直接解壓,然后在bin目錄下找到jemter.bat即可啟動使用 成功打開之后就是這個界面 每次打開可以用這種方式切換成簡體中文 或者直接修改properties文件修改對應的語言…

目標檢測算法YOLOv8簡介

YOLOv8論文尚未發布&#xff0c;YOLOv8由Ultralytics公司推出并維護&#xff0c;源碼見&#xff1a;https://github.com/ultralytics/ultralytics &#xff0c;于2024年1月發布v8.1.0版本&#xff0c;最新發布版本為v8.2.0&#xff0c;License為AGPL-3.0。 以下內容主要來自&am…

FFmpeg 中 -f 命令參數詳解

FFmpeg FFmpeg是一個開源的、功能強大的多媒體框架,它能夠處理幾乎所有格式的音頻和視頻文件。FFmpeg由Fabrice Bellard創立,并由Michael Niedermayer等人繼續開發。它包括了libavcodec(用于編解碼)、libavformat(用于格式轉換)、libavfilter(用于音視頻過濾)、libavd…

微信授權登錄01-PC端

目錄 ## 前言 1.準備工作 1.1 網站域名 1.2 微信開放平臺 2.授權授權登錄開發 2.1 前端開發 2.1.1 發起授權登錄跳轉至掃碼頁面 2.1.2 掃碼成功后回調處理 2.2 后端開發 2.2.1 根據code查詢用戶信息 2.2.2 自動注冊登錄 ## 后記 ## 前言 最近整了個AI助手網站&am…

React 學習-5

React 條件渲染: 與js中的寫法一致 注意&#xff1a;在 JavaScript 中&#xff0c;true && expression 總是返回 expression&#xff0c;而 false && expression 總是返回 false。 因此&#xff0c;如果條件是 true&#xff0c;&& 右側的元素就會被渲…

BL120協議Modbus RTU和Modbus TCP互轉

Modbus網關BL120是一款專注于Modbus協議之間相互轉換的通信設備。Modbus網關BL120支持多種下行采集協議&#xff0c;包括Modbus RTU和Modbus TCP&#xff0c;同時在上行轉發協議方面同樣支持Modbus RTU和Modbus TCP。Modbus網關為Modbus RTU和Modbus TCP協議的相互轉換提供了穩…

回爐重造java----單列集合(List,Set)

體系結構: 集合主要分為兩種&#xff0c;單列集合collection和雙列集合Map&#xff0c;區別在于單列集合一次插入一條數據&#xff0c;而雙列的一次插入類似于key-value的形式 單列集合collection 注:紅色的表示是接口&#xff0c;藍色的是實現類 ①操作功能: 增加: add()&am…