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日历组件显示月和日内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
这篇文章主要介绍了JavaScript+Canvas实现彩色图片转换成黑白图片的方法,结合实例形式分析了javascript结合HTML5相关函数修改页面图片元素显示效果相关操作技巧,需要的朋友可以参考下2018-07-07uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)
tabBar如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页,下面这篇文章主要给大家介绍了关于uniapp微信小程序底部动态tabBar的解决方案,需要的朋友可以参考下2022-04-04Navigator sendBeacon页面关闭也能发送请求方法示例
这篇文章主要为大家介绍了Navigator sendBeacon页面关闭也能发送请求的方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-06-06Wordpress ThickBox 点击图片显示下一张图的修改方法
Wordpress自带的ThickBox特效中,单击图片会调用 tb_remove 以关闭特效窗口,现将修改其动作为显示下一张图。2010-12-12
最新评论