网站建设需要的功能,免费pc 微网站模板,山东网站优化推广,售卖网站建设实验报告告别双日期面板#xff01;一招实现el-date-picker智能联动日期选择 1.需求背景2.DateTimePicker 现状图3.日期选择器实现代码4.日期选择器实现效果图5.日期时间选择器实现代码6.日期时间选择器实现效果图 1.需求背景
在用户使用时间查询时#xff0c;我们经常需要按月份筛选… 告别双日期面板一招实现el-date-picker智能联动日期选择 1.需求背景2.DateTimePicker 现状图3.日期选择器实现代码4.日期选择器实现效果图5.日期时间选择器实现代码6.日期时间选择器实现效果图 1.需求背景
在用户使用时间查询时我们经常需要按月份筛选数据。但默认的 el-date-picker 组件在 type“daterange” 时会显示双月份面板而我们需要 1.只显示单个月份面板 2.强制用户只能选择同一月份内的日期范围 2.DateTimePicker 现状图
2.1 日期选择器 2.2 DateTimePicker 日期时间选择器
3.日期选择器实现代码
主要是通过 css 样式实现
/* 隐藏右边日期面板 */
.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-table,
.el-picker-panel__content.el-date-range-picker__content.is-right
.el-date-range-picker__header
div {display: none !important;height: 800px;
}
.el-picker-panel__content.el-date-range-picker__content.is-right
.el-date-range-picker__header {width: 60px;top: -331px;left: 230px;
}
/* 设置整体日期面板的宽度 */
.el-picker-panel.el-date-range-picker.el-popper {width: 322px;
}/* 隐藏中间线段 */
.el-date-range-picker__content.is-left {border-right: none;
}/* 左边日期面板宽度 */
.el-picker-panel__content {width: 63% !important;
}.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-range-picker__header {top: -281px;
}
.el-date-range-picker__content.is-left {height: 270px;
}4.日期选择器实现效果图 5.日期时间选择器实现代码
再上述DateTimePicker 日期选择器实现代码的基础上再进行调整
.el-date-range-picker__time-picker-wrap:first-child {display: none !important;
}
.el-date-range-picker__time-header {width: 62%;
}6.日期时间选择器实现效果图 当我们在使用element组件时会遇到需要修改组件的样式但是样式无法覆盖原样式的情况。 用popper-class属性给组件传递样式 el-date-pickerv-modelvalue1typedatepopper-classcustoms-styleplaceholder选择日期/el-date-picker注意 1.具体的位移值px根据自己页面数据调整 2. 自定义样式popper-class属性只能是全局样式如果在
