时间选择器定制：无升级，自定义单元格样式

前端

2023-10-14 14:45:52

``

在前端开发中，Element-UI是一个非常受欢迎的UI组件库，其中包含了丰富且易用的组件，其中包括时间选择器（date-picker）。时间选择器支持多种功能，如日期和时间选择、日期范围选择等，在实际项目中使用广泛。

Element-UI 时间选择器的定制

Element-UI 时间选择器提供了一系列丰富的选项，允许开发人员对其进行定制，以满足不同的需求。在2.12版本之前，时间选择器并不支持自定义单元格样式，这使得开发人员无法完全按照自己的意愿来定制时间选择器的外观。

不升级版本，添加自定义样式

为了满足开发人员的个性化需求，本文将介绍一种方法，可以在不升级Element-UI版本的情况下，为时间选择器添加自定义单元格样式。这种方法非常简单，只需要在项目中引入一个额外的CSS文件，然后在该文件中定义时间选择器单元格的样式即可。

具体步骤如下：

在项目中创建一个新的CSS文件，例如custom-date-picker.css。
在custom-date-picker.css文件中添加以下代码：

/* 自定义时间选择器单元格样式 */
.el-date-picker__cell {
  /* 单元格的背景颜色 */
  background-color: #f5f5f5;
  /* 单元格的字体颜色 */
  color: #606266;
  /* 单元格的字体大小 */
  font-size: 14px;
  /* 单元格的边框 */
  border: 1px solid #ebeef5;
  /* 单元格的圆角 */
  border-radius: 2px;
  /* 单元格的内边距 */
  padding: 8px 12px;
}

/* 自定义时间选择器当前日期的单元格样式 */
.el-date-picker__cell--today {
  /* 单元格的背景颜色 */
  background-color: #e6f7ff;
  /* 单元格的字体颜色 */
  color: #409eff;
}

/* 自定义时间选择器被禁用的单元格样式 */
.el-date-picker__cell--disabled {
  /* 单元格的背景颜色 */
  background-color: #f5f5f5;
  /* 单元格的字体颜色 */
  color: #909399;
}