el-date-picker（DateTimePicker 模式）详解

el-date-picker 组件在 type 设置为 datetime 时，可以作为日期时间选择器使用，允许用户选择具体的日期和时间。它适用于需要精确到分钟的时间选择场景。

el-date-picker（DateTimePicker 模式）属性详解

1. type:

   • 类型: String
   • 用途: 日期选择器的类型，设置为 datetime 表示日期时间选择器。
   • 默认值: date

2. placeholder:

   • 类型: String
   • 用途: 输入框占位符。
   • 默认值: 请选择日期时间

3. format:

   • 类型: String
   • 用途: 输入框的显示格式。
   • 默认值: yyyy-MM-dd HH:mm:ss

4. value-format:

   • 类型: String
   • 用途: 绑定值的格式。
   • 默认值: —

5. readonly:

   • 类型: Boolean
   • 用途: 是否只读。
   • 默认值: false

6. disabled:

   • 类型: Boolean
   • 用途: 是否禁用。
   • 默认值: false

7. editable:

   • 类型: Boolean
   • 用途: 是否可以编辑输入框。
   • 默认值: true

8. clearable:

   • 类型: Boolean
   • 用途: 是否显示清除按钮。
   • 默认值: true

9. size:

   • 类型: String
   • 用途: 输入框尺寸，可选值为 large、default、small。
   • 默认值: default

10. picker-options:

    • 类型: Object
    • 用途: 配置选项，用于设置快捷选项、范围限制等。
    • 默认值: —

11. default-value:

    • 类型: Date | String
    • 用途: 默认值。
    • 默认值: —

12. prefix-icon:

    • 类型: String
    • 用途: 输入框前缀图标。
    • 默认值: el-icon-date

13. clear-icon:

    • 类型: String
    • 用途: 清除按钮图标。
    • 默认值: el-icon-circle-close

14. validate-event:

    • 类型: Boolean
    • 用途: 是否在值改变时触发校验。
    • 默认值: true

el-date-picker（DateTimePicker 模式）事件详解

1. change:

   • 类型: Function
   • 用途: 日期时间值变化时触发。
   • 参数: value（当前选中的日期时间）

2. focus:

   • 类型: Function
   • 用途: 输入框获得焦点时触发。
   • 参数: event（事件对象）

3. blur:

   • 类型: Function
   • 用途: 输入框失去焦点时触发。
   • 参数: event（事件对象）

4. visible-change:

   • 类型: Function
   • 用途: 弹出框显示或隐藏时触发。
   • 参数: visible（布尔值，表示是否显示）

el-date-picker（DateTimePicker 模式）插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义输入框的内容。

完整示例代码

<template>
  <div>
    <h2>DateTime Picker 示例</h2>

    <!-- 基本用法 -->
    <el-date-picker v-model="dateTime1" type="datetime" placeholder="选择日期时间"></el-date-picker>

    <!-- 禁用 -->
    <el-date-picker v-model="dateTime2" type="datetime" placeholder="选择日期时间" disabled></el-date-picker>

    <!-- 不可编辑 -->
    <el-date-picker v-model="dateTime3" type="datetime" placeholder="选择日期时间" editable="false"></el-date-picker>

    <!-- 不显示清除按钮 -->
    <el-date-picker v-model="dateTime4" type="datetime" placeholder="选择日期时间" clearable="false"></el-date-picker>

    <!-- 自定义格式 -->
    <el-date-picker v-model="dateTime5" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm"></el-date-picker>

    <!-- 快捷选项 -->
    <el-date-picker v-model="dateTime6" type="datetime" placeholder="选择日期时间" :picker-options="pickerOptions"></el-date-picker>

    <!-- 禁用日期时间选择 -->
    <el-date-picker v-model="dateTime7" type="datetime" placeholder="选择日期时间" :disabled-date="disabledDate"></el-date-picker>

    <!-- 自定义输入框内容 -->
    <el-date-picker v-model="dateTime8" type="datetime" placeholder="选择日期时间">
      <template #default>
        <span>{{ dateTime8 ? formatDate(dateTime8) : '请选择日期时间' }}</span>
      </template>
    </el-date-picker>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { formatDate } from 'element-plus'

const dateTime1 = ref('')
const dateTime2 = ref('')
const dateTime3 = ref('')
const dateTime4 = ref('')
const dateTime5 = ref('')
const dateTime6 = ref('')
const dateTime7 = ref('')
const dateTime8 = ref('')

const pickerOptions = ref({
  shortcuts: [
    {
      text: '今天',
      onClick(picker) {
        picker.$emit('pick', new Date())
      }
    },
    {
      text: '昨天',
      onClick(picker) {
        const date = new Date()
        date.setTime(date.getTime() - 3600 * 1000 * 24)
        picker.$emit('pick', date)
      }
    },
    {
      text: '一周前',
      onClick(picker) {
        const date = new Date()
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
        picker.$emit('pick', date)
      }
    }
  ]
})

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

const formatDate = (date) => {
  const y = date.getFullYear()
  const m = date.getMonth() + 1
  const d = date.getDate()
  const h = date.getHours()
  const min = date.getMinutes()
  return `${y}-${m}-${d} ${h}:${min}`
}
</script>

代码解释

1. 基本用法:

   • 使用 el-date-picker 组件并设置 type 为 datetime，绑定日期时间值。

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

2. 禁用:

   • 使用 disabled 属性禁用日期时间选择器。

   • <el-date-picker v-model="dateTime2" type="datetime" placeholder="选择日期时间" disabled></el-date-picker>
     

3. 不可编辑:

   • 使用 editable 属性设置输入框不可编辑。

   • <el-date-picker v-model="dateTime3" type="datetime" placeholder="选择日期时间" editable="false"></el-date-picker>
     

4. 不显示清除按钮:

   • 使用 clearable 属性设置不显示清除按钮。

   • <el-date-picker v-model="dateTime4" type="datetime" placeholder="选择日期时间" clearable="false"></el-date-picker>
     

5. 自定义格式:

   • 使用 format 属性设置输入框的显示格式。

   • <el-date-picker v-model="dateTime5" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm"></el-date-picker>
     

6. 快捷选项:

   • 使用 picker-options 属性设置快捷选项。

   • <el-date-picker v-model="dateTime6" type="datetime" placeholder="选择日期时间" :picker-options="pickerOptions"></el-date-picker>
     

7. 禁用日期时间选择:

   • 使用 disabled-date 属性禁用某些日期时间。

   • <el-date-picker v-model="dateTime7" type="datetime" placeholder="选择日期时间" :disabled-date="disabledDate"></el-date-picker>
     

8. 自定义输入框内容:

   • 使用默认插槽自定义输入框的内容。

   • 
     <el-date-picker v-model="dateTime8" type="datetime" placeholder="选择日期时间">
       <template #default>
         <span>{{ dateTime8 ? formatDate(dateTime8) : '请选择日期时间' }}</span>
       </template>
     </el-date-picker>