element日历组件只显示月和日如何把年份隐藏掉
作者：树洞菇凉
这篇文章主要介绍了element日历组件只显示月和日如何把年份隐藏掉的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
element日历组件只显示月和日，把年份隐藏掉
最终效果：
把年份和旁边的两个小标志小标去掉， 也就是把这红色框框内的内容隐藏掉
我们先用控制台看看里面具体的样式
1、可以看到 class =“el-date-picker__header” 的 div是控制日历组件的标题的，div里面的button和span就是对应标题里面的各个标签
2、需要把想要隐藏的标签给隐藏掉，就是要取“el-date-picker__header”这个类下指定button和span
3、确定需要我们隐藏的到底是哪个button和span（年份和对应的<< 和 >>隐藏掉）
/*选择日期，年份的隐藏 */
.picker-date {
.el-date-picker__header {
span:nth-child(3) { /*第三个标签是span的标签，把它隐藏*/
display: none;
}
button:nth-child(1) {
display: none;
}
button:nth-child(5) {
display: none;
}
}
}补充：
el-date-picker 默认展示当前日期
el-date-picker 默认展示当前日期
1、第一步：html中展示 el-date-picker绑定的值为 v-model=“form.checkInTime”
<el-date-picker
clearable
size="small"
v-model="form.checkInTime"
type="date"
value-format="yyyy-MM-dd"
:placeholder="$t('punchCard.please_select_punchCardDate')"
:picker-options="pickerOptions"
>
</el-date-picker>2、第二步：封装一个函数getDate()
getDate() {
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth(); //得到月份
var date = now.getDate(); //得到日期
var hour = " 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
month = month + 1;
month = month.toString().padStart(2, "0");
date = date.toString().padStart(2, "0");
var defaultDate = `${year}-${month}-${date}`;//
return defaultDate;
},3、第三步：在界面刚开始的时候直接把html中绑定的值this.form.checkInTime直接付给这个函数
我这边是打开一个dialog，所以在打开的时候赋值 this.form.checkInTime = this.getDate();
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.activePanel = "first";
this.form.checkInTime = this.getDate();
this.open = true;
this.title = this.$t("punchCard.startPunchCard");
},到此这篇关于element日历组件只显示月和日，把年份隐藏掉的文章就介绍到这了,更多相关element日历组件显示月和日内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！