深入解析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是一个非常强大的日期选择器，它支持多种不同的日期格式，可以灵活配置日期选择器的外观和行为，为用户提供了极大的便利。我们可以根据自己的需求灵活使用它的各种属性和默认设置，实现更加丰富和高效的日期选择功能。

原创文章，作者：KXXGT，如若转载，请注明出处：https://www.506064.com/n/317546.html