1. 程式人生 > >element時間範圍選擇新增限制條件

element時間範圍選擇新增限制條件

disabled的值是個布林值,就是判斷選擇值是否為禁止日期(生成日曆的時候也會觸發一次判斷)

單個輸入框的

  元件程式碼:

<el-date-picker
       v-model="value1"
       type="date"
       placeholder="選擇日期"
       :picker-options="pickerOptions0">
</el-date-picker>

  情景1: 設定選擇今天以及今天之後的日期

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now()-8.64e7;
          }
        },  
   }     
}    

  情景2: 設定選擇今天以及今天以前的日期

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },  
   }     
}   

  情景3: 設定選擇今天之後的日期(不能選擇當天時間)

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() <  Date.now(); 
            } 
        }, 
   } 
}

  情景4: 設定選擇今天之前的日期(不能選擇當天)

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() >  Date.now()-8.64e7; 
            } 
        }, 
    }
}

  情景5: 設定選擇三個月之前到今天的日期

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 90 * 24 * 3600 * 1000;
            let threeMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < threeMonths;;
          }
        },  
   }     
} 

  兩個輸入框

  元件程式碼

<el-date-picker
       v-model="value1"
       type="date"
       placeholder="開始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="結束日期"
       :picker-options="pickerOptions1">
</el-date-picker>

  情景1: 限制結束日期不能大於開始日期

data(){
    return {
         pickerOptions0: {
                disabledDate: (time) => {
                    if (this.value2 != "") {
                        return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }

                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.value1 || time.getTime() > Date.now();
                }
            },
    }      
}       

相關推薦

element時間範圍選擇新增限制條件

disabled的值是個布林值,就是判斷選擇值是否為禁止日期(生成日曆的時候也會觸發一次判斷) 單個輸入框的   元件程式碼: <el-date-picker v-model="value1" type="date"

使用PrefView監測.NET程式效能(四):摺疊,過濾和時間範圍選擇

在上一篇文章中,我們使用了Perfview的分組功能。分組功能旨在對某些函式按照某個格式進行分組,以減少檢視中的各種無關函式的數量。但僅有分組還不夠,有時我們想將一些函式呼叫資訊按某些條件過濾掉,例如將採用小於1%的函式呼叫資訊去掉,或者將函式名中包含某個字眼的函式資訊去掉,甚至只顯示某個時間段呼叫的函式。這

laydate 動態改變min 和 max, 進行時間範圍選擇

當改變下拉框值,動態改變laydate min和max 進行資料範圍選擇 1、日期選擇框: <input id="overTime" name="overTime" type="t

layui-時間選擇器-時間範圍選擇

pan class star -s tar function 時間格式 end div HTML: JS: 1 layui.use([‘laydate‘],function{ 2 3 }); start:就為你選擇的開始日期; e

d3.js製作條形時間範圍選擇

此文章為原創文章,原文地址:https://www.cnblogs.com/eagle1098/p/12146688.html 效果如上圖所示。 本專案使用主要d3.js v4製作,可以用來選擇兩年的時間範圍,兩端按鈕切換年,在時間軸上標註可以選擇的時間範圍和關鍵時間點。時間資料可以在前端配置,也可以從後端

vue:element-ui時間選擇限制只能點不能輸入

<el-form-item label="門店成立日期" prop="storeSetupDate"> <template> <div class="block

【ElementUI】時間選擇限制選擇範圍 disabledData

關於結束時間不能大於開始時間的問題,在elementui裡我們用官方提供的 disabledDate 選項來解決。 HTML:給選擇器加上:picker-options屬性 //開始時間 <

Element-UI餓了麼時間元件控制元件按月份週日期,開始時間結束時間範圍限制引數

在日常開發中,我們會遇到一些情況,在使用Element-UI 限制使用者的日期時間範圍的選擇控制(例如:查詢訊息開始和結束時間,需要限制不能選擇今天之後的時間)。   看了網上的一些文件,零零散散、各式各樣的都是簡單的吧程式碼列出來,並沒有詳細的說明各引數的含義,用途,對新手及其不友好。

關於 Vue.js+Element-UI 日期控件 日期範圍選擇

alt logs 插件 code after ast () details cxf 理想效果 : 也就是說前面時間框的時間能選的範圍應該小於等於後面的時間框; 後面時間框能選的範圍應該大於等於前面的時間框; 示例代碼 : 頁面: <el-form-item

my97date 時間範圍限制

lan get head limit r.js hour pic seconds -s 需求:根據開始時間,動態限制結束時間 實現: <!DOCTYPE html> <html lang="en"> <head> <met

用datetimepicker插件實現限定時間範圍選擇

ace 技術 src ets set -i hicon tst -c 1、下面是要實現的效果圖,讓開始時間只能從 2018-7-1 到 2018-7-7 選擇。    2、html的結構 <div class="input-append input-group

element 時間選擇器——年

技術分享 有關 alt 關於 image ear class 技術 http <el-date-picker v-model="fileYear" type="year" placeholder="選擇年"> </el-date-picker>

[智慧家居]限制程式可執行時間範圍

專案需求:限制一個情景的執行時間段,如:一個情景只能在2點到3點執行,其它時間不執行。 思路:獲取當前的時間戳,把開始和結束時間設為今天的時間戳,拿當前時間與開始和結束時間三者做對比。當然也要考慮跨天的問題。 涉及的知識點: 1.tm結構體 struct tm {

element-ui 時間日期選擇器格式化後臺需要的格式

<el-date-picker v-model="startTime" type="datetime" @change="dateChangebirthday1" format="yyyy-MM-

PickerView時間選擇器和條件選擇

github地址:https://github.com/Bigkoo/Android-PickerView PickerViewDialog.zip原始碼地址:http://download.csdn.net/detail/daidaishuiping/9798681 s

Jpa查詢排序,時間範圍查詢,當天時間範圍查詢,集合list條件查詢

1.在spring data for jpa 中,存在一個pageable介面,pageable介面的實現類的構造方法中有個Sort引數,可以按照列屬性進行排序。通過檢視Sort類的構造方法,我們對Sort這個類進行一下分析,Sort類中存在以下幾個構造方法: 1).pub

sql 時間範圍查詢條件

--一年內註冊查詢 select * from User where datediff(year,Createdate,getdate())=0 --一月內註冊查詢 select * from User where datediff(month,Createdate,g

laydate範圍選擇,結束時間大於開始時間同時大於當前時間

    elem: '#state',     format: 'YYYY/MM/DD',     min: laydate.now(), //設定最小日期為當前日期     max: '2099-06-16 23:59:59', //最大日期      istime: true,     istoday:

ElementUI DatePicker 日期選擇器控制選擇時間範圍

time() value hold disabled -o 24* true 時間 picker 選擇今天以及今天之後的日期 <el-date-picker v-model="value1" type="date"

JAVA-三大語句(選擇語句、條件語句、循環語句)

== goto true bsp 語句 for循環 logs light log 跳出指定的for循環體,和goto很像 1 K:for(int i=0;i<3;i++){//給這個for循環體取一個名字為K 2 for(int j=0;j<3;j++