02.el-date-picker组件只可以选择为了时间，精确到时分秒

**02. el-date-picker 组件**

el-date-picker 是一个常用的日期选择器组件，在 Vue.js 中非常流行。它允许用户选择日期、月份或年份，并且可以精确到时分秒。

### **基本使用**

首先，我们需要在项目中安装 `element-ui` 库：

bashnpm install element-ui --save

然后，导入 `el-date-picker` 组件并使用它：

html<template>
 <div>
 <el-date-picker v-model="date"
 type="datetime"
 placeholder="选择日期时间">
 </el-date-picker>
 </div>
</template>

<script>
export default {
 data() {
 return {
 date: ''
 }
 }
}
</script>

在上面的示例中，我们使用 `v-model` 绑定一个 `date` 变量，用于存储选择的日期时间。

### **选项**

`el-date-picker` 组件提供了许多选项，可以自定义其行为。下面是一些常用的选项：

* `type`: 可以是 `year`, `month`, `date`, `datetime` 或 `datetimerange`。
* `placeholder`: 输入框的占位符文本。
* `format`: 日期格式，例如 "yyyy-MM-dd" 或 "yyyy-MM-dd HH:mm:ss"。
* `value-format`: 返回值的日期格式。

### **事件**

`el-date-picker` 组件提供了几个事件，可以用于响应用户的操作：

* `change`: 当选择的日期时间发生变化时触发。
* `blur`: 当输入框失去焦点时触发。
* `focus`: 当输入框获得焦点时触发。

### **示例代码**

html<template>
 <div>
 <el-date-picker v-model="date"
 type="datetime"
 placeholder="选择日期时间"
 format="yyyy-MM-dd HH:mm:ss"
 value-format="yyyy-MM-dd HH:mm:ss">
 </el-date-picker>

 <p>选择的日期时间：{{ date }}</p>
 </div>
</template>

<script>
export default {
 data() {
 return {
 date: ''
 }
 },
 methods: {
 handleDateChange(val) {
 console.log('选择的日期时间：', val)
 }
 }
}
</script>

在上面的示例中，我们使用 `format` 和 `value-format`选项自定义了日期格式。我们还监听了 `change`事件，打印出选择的日期时间。

### **总结**

`el-date-picker` 组件是一个非常有用的工具，可以帮助用户选择日期、月份或年份，并且可以精确到时分秒。在本文中，我们介绍了基本使用、选项和事件，以及示例代码。希望这篇文章能够帮助你更好地理解 `el-date-picker` 组件的使用和配置。