深入解析el-date-picker的格式

一、el-date-picker屬性

1、value-format：指定輸入框的值的格式，可以是字元串，也可以是一個函數。如下代碼所示，格式為yyyy-MM-dd。

<el-date-picker v-model="date" value-format="yyyy-MM-dd"></el-date-picker>

2、format：指定選擇器中日期的顯示格式，可以是字元串，也可以是一個函數。如下代碼所示，格式為yyyy年MM月dd日。

<el-date-picker v-model="date" format="yyyy年MM月dd日"></el-date-picker>

3、type：設置日期選擇器的類型，有year、month、date、dates、week、datetime、datetimerange、daterange。如下代碼所示，類型為月份選擇器。

<el-date-picker v-model="month" type="month"></el-date-picker>

4、placeholder：輸入框的佔位符。如下代碼所示，佔位符為請選擇日期。

<el-date-picker v-model="date" placeholder="請選擇日期"></el-date-picker>

5、editable：是否可以輸入框手動輸入日期。設置為false時，無法手動輸入。如下代碼所示，不能手動輸入。

<el-date-picker v-model="date" editable=false></el-date-picker>

二、el-date-picker默認值

1、value：輸入框的默認值。如下代碼所示，默認日期為2019-12-23。

<el-date-picker v-model="date" :value="new Date('2019-12-23')"></el-date-picker>

2、default-time：設置日期選擇器的默認時間，如下代碼所示，選擇器默認時間為下午3點30分。

<el-date-picker v-model="datetime" type="datetime" :default-time="['15:30:00']"></el-date-picker>

3、default-value：設置選擇器的默認值。如下代碼所示，選擇器的默認值為2019-12-23至2020-01-01。

<el-date-picker v-model="daterange" type="daterange" :default-value="[new Date('2019-12-23'), new Date('2020-01-01')]"></el-date-picker>

三、輸入框樣式與格式

1、點擊輸入框彈出選擇器。如下代碼所示，點擊輸入框彈出選擇器。

<el-date-picker v-model="date" :editable="false" :clearable="false" :picker-options="{firstDayOfWeek:1,selectWeek: true,weekFormat:'一第 ww 周',rangeSeparator:' 至 ',format: 'yyyy年MM月dd日',type:'date', shortcuts: [{text: '今天', onClick: function() {this.$refs.dp.$emit('pick', new Date());}}, {text: '昨天', onClick: function() {var d = new Date(); d.setTime(d.getTime() - 24*60*60*1000); this.$refs.dp.$emit('pick', d);}}, {text: '一周前', onClick: function() {var d = new Date(); d.setTime(d.getTime() - 24*60*60*1000*7); this.$refs.dp.$emit('pick', d);}}]}" ref="dp" @change="onDateChanged"></el-date-picker>

2、日期區間選擇。如下代碼所示，選擇日期區間。

<el-date-picker v-model="daterange" type="daterange" start-placeholder="開始日期" end-placeholder="結束日期"></el-date-picker>

3、快捷選項。如下代碼所示，設置選擇器內的快捷選項。

<el-date-picker v-model="date" :editable="false" :clearable="false" :picker-options="{firstDayOfWeek:1,shortcuts: [{text: '今天', onClick: function() {this.$refs.dp.$emit('pick', new Date());}}, {text: '昨天', onClick: function() {var d = new Date(); d.setTime(d.getTime() - 24*60*60*1000); this.$refs.dp.$emit('pick', d);}}, {text: '一周前', onClick: function() {var d = new Date(); d.setTime(d.getTime() - 24*60*60*1000*7); this.$refs.dp.$emit('pick', d);}}]}" ref="dp" @change="onDateChanged"></el-date-picker>

四、其他屬性

1、clearable：是否可以清除已選擇的日期。如下代碼所示，選擇後可以清除日期。

<el-date-picker v-model="date" :clearable="true"></el-date-picker>

2、disabled：是否可以選擇日期。如下代碼所示，選擇器禁用。

<el-date-picker v-model="date" :disabled="true"></el-date-picker>

3、range-separator：使用daterange時，選擇的區間兩個日期的分隔符。如下代碼所示，使用’~’作為日期的分隔符。

<el-date-picker v-model="daterange" type="daterange" range-separator="~"></el-date-picker>

4、picker-options：選擇器的配置項，可以定製化選擇器的外觀和行為。如下代碼所示，設置了選擇器外觀為淺色，每周的第一天為周一，選擇器類型為日期選擇器。

<el-date-picker v-model="date" :picker-options="{pickercolor: 'rgb(255, 249, 237)', firstDayOfWeek: 1, type: 'date'}"></el-date-picker>

五、總結

el-date-picker是一個非常強大的日期選擇器，它支持多種不同的日期格式，可以靈活配置日期選擇器的外觀和行為，為用戶提供了極大的便利。我們可以根據自己的需求靈活使用它的各種屬性和默認設置，實現更加豐富和高效的日期選擇功能。