el-date-picker 自定义时间

el-date-picker 是 Element UI 中的一个日期选择器组件，可以用于选择日期和时间。要自定义时间，可以使用 el-date-picker 的 value-format 属性和 picker-options 属性。

1. 使用 value-format 属性自定义时间格式：

<el-date-picker
  v-model="date"
  value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>

在上面的例子中，我们将时间格式设置为年-月-日 时:分:秒。

2. 使用 picker-options 属性自定义时间选项：

<el-date-picker
  v-model="date"
  :picker-options="pickerOptions"
></el-date-picker>

在上面的例子中，我们可以通过设置 pickerOptions 对象来自定义时间选项，例如设置可选的时间范围、禁用某些时间等。具体的自定义选项可以参考 Element UI 官方文档。

相关问题

el-date-picker 尾部自定义图标

el-date-picker组件提供了一个属性slot来实现尾部自定义图标的功能。具体实现方法如下所示：

<el-date-picker
  v-model="date"
  type="date"
  placeholder="选择日期"
  :picker-options="pickerOptions">
  <template slot="footer">
    <span style="float: right; margin-right: 10px">
      <el-button size="small" type="text" @click="date = ''">清空</el-button>
      <el-button size="small" type="primary" @click="$refs.datePicker.confirm()">确定</el-button>
    </span>
  </template>
</el-date-picker>

在el-date-picker组件中，我们使用了slot属性来定义了一个名为footer的插槽，然后在插槽中定义了两个按钮，一个用于清空日期，一个用于确认日期。这样就可以实现尾部自定义图标的功能了。

el-date-picker的自定义后置图标

以下是el-date-picker自定义后置图标的方法：

<el-form-item>
  <el-date-picker
    v-model="dateRange"
    suffix-icon="your-icon-class"
    size="small"
    style="width: 240px;margin-left:22px;"
    value-format="yyyy-MM-dd"
    type="daterange"
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  />
</el-form-item>

其中，`suffix-icon`属性用于设置后置图标的类名，你可以自定义一个类名，然后在CSS中设置该类名的样式即可。例如：

.your-icon-class {
  background-image: url('your-icon-url');
  background-size: contain;
  width: 20px;
  height: 20px;
}

这里的`.your-icon-class`就是你自定义的类名，`background-image`属性用于设置图标的URL，`background-size`属性用于设置图标的大小，`width`和`height`属性用于设置图标的宽度和高度。