element日期選擇器el-date-picker樣式圖文詳解

更新時間：2022年09月15日 16:55:30 作者：zttbee

最近寫的項目里面有一個功能是日期選擇功能,第一反應是使用element里面的el-date-picker組件,下面這篇文章主要給大家介紹了關于element日期選擇器el-date-picker樣式的相關資料,需要的朋友可以參考下

1、基本用法

代碼：

<el-date-picker
	type="date"
	v-model="valueStart"
	value-format="yyyy-MM-dd"
	placeholder="開始時間" >
 </el-date-picker>

代碼解讀：

type參數(shù)是用來定義選擇器選擇的對象，這里我們選擇的是日期(date)，也可以只選擇年（year），只選擇月(month)，或只選擇周(week)。

v-model是綁定一個值，如果不綁定的話，即使選擇了某一個日期，框框里也沒有數(shù)值。

value-format定義獲取的時間的格式

placeholder是占位提示文字。

效果：背景白色，與頁面顏色不搭

2、調(diào)高度、顏色

代碼

::v-deep .el-input__inner {
	  background-color: transparent !important;
	  border-color:#80ffff;
	  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
	  height: 30px;
	}

代碼解讀

background-color設置顏色，設置為透明，!important表示要覆蓋以前的樣式，本樣式優(yōu)先。

border-color設置邊框顏色

box-shadow設置陰影樣式

height設置高度。

效果

背景變透明后與頁面風格搭了起來，但日歷圖表沒有垂直居中，反而有些靠下。

3、調(diào)日歷圖標位置

代碼

::v-deep .el-input__icon {
	    line-height: 30px;
	}

代碼解讀

把行高設為與日期框一樣的高度就OK了，我這里日期框高是30px。

效果

圖標居中了

4、調(diào)日歷面板

代碼

首先自定義一個樣式名elDatePicker

<el-date-picker
	popper-class="elDatePicker"
	type="date"
	v-model="valueStart"
	placeholder="開始時間">
</el-date-picker>

然后在全局樣式中定義該樣式，我這個全局樣式文件叫home.scss,在main.js引入了該文件(import “./assets/styles/home.scss”??

.elDatePicker.el-picker-panel {
  color: #fff;//設置當前面板的月份的字體為白色，記為1
  background: #002450;//定義整體面板的顏色
  border: 1px solid #1384b4;//定義整體面板的輪廓
  .el-picker-panel__icon-btn {//設置年份月份調(diào)節(jié)按鈕顏色，記為2
    color: #ffffff;
   }
  .el-date-picker__header-label{//設置年月顯示顏色，記為3
  	color: #ffffff;
  }
  .el-date-table th {//設置星期顏色，記為4
      color:#ffffff;
  }
  
}

效果

5、設置日期框日期顏色

細心的讀者可能發(fā)現(xiàn)選中日期后，框里顯示的日期是灰色，在之前的el-input__inner樣式里加入color:#ffffff;就OK了

::v-deep .el-input__inner {
	  background-color: transparent !important;
	  border-color:#80ffff;
	  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
	  height: 30px;
	  color:#ffffff;//字體為白色
	}

6、拓展

拓展

在修改日期框樣式時，上述代碼的.el-input__inner，.el-input__icon沒有指明是哪個輸入框，哪個圖標，如果這樣用的話，會污染其它框以及圖標的樣式，因此，可以指明是時期選擇器

	::v-deep .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date{
		
	 input{//輸入框，想當于.el-input__inner
			background-color: transparent !important;
			border-color:#80ffff;
			box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
			color:#ffffff;
			height: 30px;	
		  }
	.el-input__icon {//日歷圖標
			    line-height: 30px;
			}	
	}