el-date-picker详解

el-date-picker 是 Element Plus 框架中的日期选择器组件，用于让用户选择日期或日期范围。它可以用于表单、日程安排等多种场景。

el-date-picker 属性详解

1. type:

   • 类型: String
   • 用途: 日期选择器的类型，可选值为 date、datetime、year、month、dates、daterange、monthrange、datetimerange。
   • 默认值: date

2. placeholder:

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

3. start-placeholder:

   • 类型: String
   • 用途: 开始日期的占位符（仅在 type 为 daterange 或 datetimerange 时有效）。
   • 默认值: 请选择开始日期

4. end-placeholder:

   • 类型: String
   • 用途: 结束日期的占位符（仅在 type 为 daterange 或 datetimerange 时有效）。
   • 默认值: 请选择结束日期

5. format:

   • 类型: String
   • 用途: 输入框的显示格式。
   • 默认值: —

6. value-format:

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

7. readonly:

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

8. disabled:

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

9. editable:

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

10. clearable:

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

11. size:

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

12. picker-options:

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

13. default-value:

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

14. range-separator:

    • 类型: String
    • 用途: 日期范围分隔符（仅在 type 为 daterange 或 datetimerange 时有效）。
    • 默认值: —

15. unlink-panels:

    • 类型: Boolean
    • 用途: 是否解耦两个日期面板（仅在 type 为 daterange 或 datetimerange 时有效）。
    • 默认值: false

16. prefix-icon:

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

17. clear-icon:

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

18. validate-event:

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

el-date-picker 事件详解

1. change:

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

2. focus:

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

3. blur:

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

4. visible-change:

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

el-date-picker 插槽详解

1. default:

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

完整示例代码

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

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

    <!-- 日期范围选择 -->
    <el-date-picker v-model="dateRange1" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

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

    <!-- 年份选择 -->
    <el-date-picker v-model="year1" type="year" placeholder="选择年份"></el-date-picker>

    <!-- 月份选择 -->
    <el-date-picker v-model="month1" type="month" placeholder="选择月份"></el-date-picker>

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

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

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

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

const date1 = ref('')
const dateRange1 = ref('')
const dateTime1 = ref('')
const year1 = ref('')
const month1 = ref('')
const date2 = ref('')
const date3 = ref('')
const date4 = 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()
  return `${y}-${m}-${d}`
}
</script>

代码解释

1. 基本用法:

   • 使用 el-date-picker 组件并设置 v-model 绑定日期值。

   • <el-date-picker v-model="date1" type="date" placeholder="选择日期"></el-date-picker>
     

2. 日期范围选择:

   • 使用 type 属性设置为 daterange，并设置 start-placeholder 和 end-placeholder。

   • <el-date-picker v-model="dateRange1" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
     

3. 时间选择:

   • 使用 type 属性设置为 datetime。

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

4. 年份选择:

   • 使用 type 属性设置为 year。

   • <el-date-picker v-model="year1" type="year" placeholder="选择年份"></el-date-picker>
     

5. 月份选择:

   • 使用 type 属性设置为 month。

   • <el-date-picker v-model="month1" type="month" placeholder="选择月份"></el-date-picker>
     

6. 快捷选项:

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

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

7. 禁用日期选择:

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

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

8. 自定义输入框内容:

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

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