el-date-picker日期選擇限制範圍

来源:https://www.cnblogs.com/Z-HarOld/archive/2022/09/16/16700080.html
-Advertisement-
Play Games

1.如果只比較兩個值的話 效果是這種的 // 這是<template>的 <el-row> <el-col :span="12"> <el-form-item label="計劃評審日期(起)" prop="planPsDateStart"> <el-date-picker v-model="vm. ...


1.如果只比較兩個值的話---效果是這種的

  

 

 

 

 

// 這是<template>的
 <el-row>
            <el-col :span="12">
              <el-form-item label="計劃評審日期(起)" prop="planPsDateStart">
                <el-date-picker
                  v-model="vm.edit.data.planPsDateStart"
                  type="date"
                  :picker-options="pickerOption_start"
                  placeholder="開始時間"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="計劃評審日期(止)" prop="planPsDateEnd">
                <el-date-picker
                  v-model="vm.edit.data.planPsDateEnd"
                  type="date"
                  :picker-options="pickerOption_end"
                  placeholder="結束時間"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

          </el-row>



// 這是<script>下的data的
  pickerOption_start: {
        disabledDate: (time) => {
          if (this.vm.edit.data.planPsDateEnd !== undefined) {
            return time.getTime() > this.vm.edit.data.planPsDateEnd
          }
        }
      },
      pickerOption_end: {
        disabledDate: (time) => {
          if (this.vm.edit.data.planPsDateStart !== undefined) {
            return time.getTime() < this.vm.edit.data.planPsDateStart
          }
        }
      }

2.如果是table一直在迴圈這種日期,而且只比較每一行的兩個日期

效果是這樣的

 

 

// 放在el-table下的兩列
<el-table-column prop="lastModifyUserId" label="計劃開始日期" align="center">
<template slot-scope="scope"> <el-date-picker v-model="scope.row.planStart" type="date" placeholder="計劃開始日期" :picker-options="{disabledDate: (time) => {if (scope.row.planEnd !== undefined) {return time.getTime() > scope.row.planEnd} }}" style="width: 100%" :disabled="limitsDisabledFun()" /> </template> </el-table-column> <el-table-column prop="name" label="計劃結束日期" align="center"> <template slot-scope="scope"> <el-date-picker v-model="scope.row.planEnd" type="date" placeholder="計劃結束日期" :picker-options="{disabledDate: (time) => {if (scope.row.planStart !== undefined) {return time.getTime() < scope.row.planStart} }}" style="width: 100%" :disabled="limitsDisabledFun()" /> </template> </el-table-column>

 

 原理一樣的-就是把data下的pickerOption直接嵌到代碼裡面,不放在data中

 

 

湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • redis集群的搭建 redis集群的三種模式 主從複製 哨兵模式 cluster集群 redis-cluster集群的搭建(在一臺linux中搭建,三主三從) 下載安裝redis5.0.3 cd /opt 下載redis安裝包 wget http://download.redis.io/relea ...
  • Appuploader可以輔助在Windows、linux或mac系統直接申請iOS證書p12,及上傳ipa到App Store,最方便在Windows開發上架沒有蘋果Mac電腦的開發者!配合本教程使用,可以快速掌握如何真機測試及上架! 點擊蘋果證書 按鈕 點擊新增 ​ 輸入證書密碼,名稱 這個密碼 ...
  • 移動端中的元素內容超出時,對容器設置overflow-x: auto就可以通過手勢水平移動。但是 PC 端只能通過滑鼠滾輪上下滑動,而不能水平移動。 只需要給元素添加一個監聽滑鼠滾輪事件,上下滑動時修改其 scrollLeft 屬性值就可以實現。直接貼上代碼: <div class="horizon ...
  • 好家伙, 我的飛機大戰部署上線了 胖虎的飛機大戰 感興趣的可以去玩一下 (怕有人接受不了這個背景,我還貼心的準備切換背景按鈕,然而這並沒有什麼用) 現在,我們停下腳步,重新審視這個游戲 現在基本的框架都弄出來了,敵機,英雄,子彈,分數,生命 但是,這個“游戲“有個非常致命的問題, 他不好玩,(不好玩 ...
  • 本文分別使用 SFC(模板方式)和 tsx 方式對 Element Plus *el-menu* 組件進行二次封裝,實現配置化的菜單,有了配置化的菜單,後續便可以根據路由動態渲染菜單。 ...
  • vue3中,新增了 defineComponent ,它並沒有實現任何的邏輯,只是把接收的 Object 直接返回,它的存在是完全讓傳入的整個對象獲得對應的類型,它的存在就是完全為了服務 TypeScript 而存在的。 我都知道普通的組件就是一個普通的對象,既然是一個普通的對象,那自然就不會獲得自 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、前言 入職的第一個需求是跟著一位前端大佬一起完成的一個活動項目。 由於是一起開發,當然不會放過閱讀大佬的代碼的機會。 因為我的頁面中需要使用到倒計時功能,發現大佬的已經寫了個現成的倒計時組件,於是直接就拿過來用了。 傳個參數就實現了功 ...
  • 本人的工作項目中,需求是: 點擊“列印”按鈕,打開pdf預覽彈出框,彈出框有:頭部選擇列印模板、列印方式、印表機,都是下拉選擇框;中部是pdf預覽塊;底部是確定列印。 準備工作: 預覽pdf,後端介面返回了pdf預覽地址,可線上直接打開。vue-pdf插件可以滿足需求。 選擇方式如果選擇本地列印,下 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...