ElementUI 日期選擇器時間選擇範圍限制

2021-10-25 07:18:32 字數 1834 閱讀 6116

elementui是餓了麼推出的一套基於vue2.x的乙個ui框架。官方文件也很詳細,這裡做乙個element-ui日期外掛程式的補充。

官方文件中使用picker-options屬性來限制可選擇的日期,這裡舉例子稍做補充。

"block"

>

"demonstration"

>設定預設時間

v-model=

"releasedtimerange"

type=

"datetime"

placeholder=

"選擇日期時間"

default-time=

"12:00:00"

:picker-options=

"pickeroptions"

@change=

"getresidualtime"

>

引數:

pickeroptions:this.setpickeroptions(

),

//定時傳送,當天之前的日期不能選

setpickeroptions()}

},

元件**:

v-model=

"value1"

type=

"date"

placeholder=

"選擇日期"

:picker-options=

"pickeroptions0"

>

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

data (

)},

}}

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

data (

)},

}}

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

data (

)},

}}

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

data (

)},

}}

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

data (

)},

}}

元件**

v-model=

"value1"

type=

"date"

placeholder=

"開始日期"

:picker-options=

"pickeroptions0"

>

v-model=

"value2"

type=

"date"

placeholder=

"結束日期"

:picker-options=

"pickeroptions1"

>

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

data(

)else}},

pickeroptions1:

}, }

}

methods:

else}}

}, //結束時間設定

setpickeroptionsenddate()}

}, }

ElementUI日期選擇器時間選擇範圍限制

elementui是餓了麼推出的一套基於vue2.x的乙個ui框架。官方文件也很詳細,這裡做乙個element ui日期外掛程式的補充,官方文件中使用picker options屬性來限制可選擇的日期,這裡舉例子稍做補充。一 單個輸入框的 元件 picker v model value1 type ...

elementUI日期選擇器,對日期格式進行處理

使用elementui日期選擇器中,獲取不同格式的時間 v model ruleform.zeroing type date type datetime value format timestamp style width 240px placeholder 選擇日期 value format yy...

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

elementui提供的日期選擇器,開發中遇到了要設定日期的可選範圍為今天及以後的時間 單個日期控制 vue 限制不能選擇今天之前的日期 可以選擇今天的日期 限制不能選擇今天之前的日期 不能選擇今天的日期 兩個日期聯動控制 運用場景 1 當天日期為 2021 01 07 2 elementui的兩個...