Vue elementUI時間選擇器的應用

2021-10-08 08:52:08 字數 2428 閱讀 6438

日期選擇器基本用法可參照官網的案例,這裡記錄一下精確到日的乙個需求的相關實現。

需求說明:設定乙個日期範圍選擇功能,預設顯示近乙個月的使用者資料,不能選擇當天。

需要注意的點:雖然顯示的是某一天,但是我們需要注意一種情況,舉個例子:預設顯示的是近乙個月的使用者資料,以今天2020.7.21為例,日期範圍選擇器上顯示的就是2020.6.20~2020.7.20,頁面上顯示的資料是否包含6.20和7.20的資料呢?以使用者的角度來說,應該是包含的,那麼我們在向後端請求資料的時候,就需要將開始日期和結束日期的具體時間作為引數傳遞過去。

具體實現:

="block"

>

v-model=

"daterange"

type=

"daterange"

start-placeholder=

"開始日期"

end-placeholder=

"結束日期"

>

<

/el-date-picker>

<

/div>

<

/template>

const now =

newdate()

const start =

newdate

(now.

getfullyear()

, now.

getmonth()

-1, now.

getdate()

-1).

gettime()

const end = now.

gettime()

-3600

*1000*24

export

default;}

};<

/script>

="block"

>

v-model=

"daterange"

type=

"daterange"

start-placeholder=

"開始日期"

end-placeholder=

"結束日期"

:picker-options=

"pickeroptions"

// 自定義時間選擇選項

>

<

/el-date-picker>

<

/div>

<

/template>

const now =

newdate()

const start =

newdate

(now.

getfullyear()

, now.

getmonth()

-1, now.

getdate()

-1).

gettime()

const end = now.

gettime()

-3600

*1000*24

export

default},

methods:}}

};<

/script>實現效果:

"開始日期"

end-placeholder=

"結束日期"

:default

-time=

"['00:00:00', '23:59:59']"

:picker-options=

"pickeroptions"

>

<

/el-date-picker>

<

/div>

<

/template>

const now =

newdate()

const start =

newdate

(now.

getfullyear()

, now.

getmonth()

-1, now.

getdate()

-1).

gettime()

const end = now.

gettime()

-3600

*1000*24

export

default},

methods:}}

};<

/script>

datepickerpopup時間限制選取

使用popup元件的過程中遇到時間選取的問題 官方文件大致說使用date和mode 可以解決,奈何老夫是看不懂,寫的時候參考的有 官方文件 echo2016的博文 liumang361的博文 先看圖 doctype html html lang en head meta charset utf 8 ...

vue elementUI專案搭建

安裝node 基於node之npm環境下操作vue,所以先部署node 安裝gitwget http 7 extras x86 64 packages epel release 7 11.noarch.rpm yum install y epel release 7 11.noarch.rpm yu...

重置表單(vue elementui)

第一種 在methods下的具體方法中直接乙個乙個地將表單繫結的值賦值為空 最笨的方法,只適用於僅幾個繫結值的情況下 第二種 elementui官網的方法 從這裡直接進入官網表單相關位置 model ruleform rules rules ref ruleform label width 100p...