elementplus时间范围选择器自定义单个选择器

单个时间器

初始的样式如下：

修改后样式：

因为项目中涉及的时间器都是这个样式，所以我写在了单独的css文件中
必须在elementplus组件样式之后导入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import './style.css'
import '@/style/reuse.css' // 你编写的覆盖样式文件

/* 可以根据自己页面调整 */
.el-date-range-picker {
  width: 400px;
}
/* 可以根据自己页面调整 */
.el-date-range-picker .el-picker-panel__body {
  min-width: 350px;
}

/* 清除右边日期面板和右边日期 */
.el-picker-panel__content.el-date-range-picker__content.is-right {
  height: 0;
}
.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;
}

/* 下一月和下一年按钮样式, 位置可以根据自己页面调整 */
.el-picker-panel__content.el-date-range-picker__content.is-right
  .el-date-range-picker__header {
  width: 60px;
  top: -340px;
  left: 300px;
  display: flex;
}
/* 调整按钮位置 */
.el-date-range-picker__header [class*=arrow-right]  {
  position: absolute;
  right: 36px;
}
.el-date-range-picker__header .el-picker-panel__icon-btn.d-arrow-right {  
  right: 0 !important;  
}

/* 隐藏中间线段 */
.el-date-range-picker__content.is-left {
  border-right: none;
}
/* 左边日期面板宽度 */
.el-picker-panel__content {
  width: 95% !important;
}

单个时间器中去掉秒

format：是整个时间输入的格式(上面最长的输入框)，这里去掉了ss
data-format：时间选择器下拉列表中显示的日期格式，这个不用写就行，默认也是这个
time-format：时间选择器下拉列表中显示的时间格式，去掉秒ss，并且24小时制，大写HH
value-format：x表示你接收的数据是毫秒级时间戳，[开始时间, 结束时间]，如果后端需要秒级：Math.floor(createdTime[0] / 1000)

<el-date-picker 
	v-model="createdTime" 
	type="datetimerange" 
	range-separator="-"
	start-placeholder="开始时间" 
	end-placeholder="结束时间" 
	format="YYYY-MM-DD HH:mm" 
	date-format='YYYY-MM-DD'
	time-format="HH:mm" 
	value-format="x" 
/>

在上面css文件基础上加，重复代码就不展示了~

/* 时间选择器宽度，可以根据自己页面调整 */
.el-time-panel {
  width: 130px;
}
/* 去掉秒 */
.el-time-spinner.has-seconds .el-time-spinner__wrapper:last-child {
  display: none;
}
/* 设置小时和分钟宽度，可以根据自己页面调整 */
.el-time-spinner.has-seconds .el-time-spinner__wrapper {
  width: 47%;
}