程序员scholar
  • Element-UI
  • 表单组件
scholar
2024-08-12
目录

日期选择器（DatePicker）

# 日期选择器（DatePicker）

Element-UI 的日期选择器组件用于选择或输入日期。它支持多种显示类型和格式化选项，以满足不同的应用场景。

提示

日期选择器（DatePicker）官方文档：https://element.eleme.cn/#/zh-CN/component/date-picker (opens new window)

# 1. 基本用法

基本语法：在 Vue 组件中使用 <el-date-picker> 标签创建一个日期选择器。通过 v-model 绑定选择器的值。

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

<script>
export default {
  data() {
    return {
      dateValue: '' // 日期选择器的初始值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • v-model 绑定：日期选择器的值通过 v-model 与 dateValue 绑定。当用户选择日期时，dateValue 会自动更新。
  • 显示类型：通过 type 属性指定日期选择器的类型，如 date、daterange 等。
  • image-20240808053537590

# 日期格式

使用 format 指定输入框的格式；使用 value-format 指定绑定值的格式。

默认情况下，组件接受并返回 Date 对象。以下为可用的格式化字符串示例：

格式 含义 备注 举例
yyyy 年 2017
M 月 不补 0 1
MM 月 01
W 周 仅周选择器的 format 可用；不补 0 1
WW 周 仅周选择器的 format 可用 01
d 日 不补 0 2
dd 日 02
H 小时 24 小时制；不补 0 3
HH 小时 24 小时制 03
h 小时 12 小时制，须和 A 或 a 使用；不补 0 3
hh 小时 12 小时制，须和 A 或 a 使用 03
m 分钟 不补 0 4
mm 分钟 04
s 秒 不补 0 5
ss 秒 05
A AM/PM 仅 format 可用，大写 AM
a am/pm 仅 format 可用，小写 am
timestamp JS 时间戳 仅 value-format 可用；组件绑定值为数字 1483326245000
[MM] 不需要格式化字符 使用方括号标识不需要格式化的字符 MM

# DatePicker 属性

参数 说明 类型 可选值 默认值
value / v-model 绑定值 date(DatePicker) / array(DateRangePicker) — —
readonly 完全只读 boolean — false
disabled 禁用 boolean — false
editable 文本框可输入 boolean — true
clearable 是否显示清除按钮 boolean — true
size 输入框尺寸 string large, small, mini —
placeholder 非范围选择时的占位内容 string — —
start-placeholder 范围选择时开始日期的占位内容 string — —
end-placeholder 范围选择时结束日期的占位内容 string — —
type 显示类型 string year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange date
format 显示在输入框中的格式 string 见日期格式 yyyy-MM-dd
align 对齐方式 string left, center, right left
popper-class DatePicker 下拉框的类名 string — —
picker-options 当前时间日期选择器特有的选项 object — {}
range-separator 选择范围时的分隔符 string — '-'
default-value 选择器打开时默认显示的时间 Date 可被 new Date() 解析 —
default-time 范围选择时选中日期所使用的当日内具体时刻 string[] 数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00 —
value-format 绑定值的格式。不指定则绑定值为 Date 对象 string 见日期格式 —
name 原生属性 string — —
unlink-panels 在范围选择器里取消两个日期面板之间的联动 boolean — false
prefix-icon 自定义头部图标的类名 string — el-icon-date
clear-icon 自定义清空图标的类名 string — el-icon-circle-close
validate-event 输入时是否触发表单的校验 boolean — true
append-to-body DatePicker 自身是否插入至 body 元素上 boolean — true

# Picker 选项

参数 说明 类型 可选值 默认值
shortcuts 设置快捷选项，需要传入 { text, onClick } 对象，用法参考 demo 或下表 Object[] — —
disabledDate 设置禁用状态，参数为当前日期，要求返回 Boolean Function — —
cellClassName 设置日期的 className Function(Date) — —
firstDayOfWeek 周起始日 Number 1 到 7 7
onPick 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效 Function({ maxDate, minDate }) — —

# Shortcuts

参数 说明 类型 可选值 默认值
text 标题文本 string — —
onClick 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) function — —

# DatePicker 事件

事件名称 说明 回调参数
change 用户确认选定的值时触发 组件绑定值。格式与绑定值一致，可受 value-format 控制
blur 当 input 失去焦点时触发 组件实例
focus 当 input 获得焦点时触发 组件实例

# DatePicker 方法

方法名 说明 参数
focus 使 input 获取焦点 —

# 2. 常见日期选择器示例

# 基础日期选择器

通过 v-model 绑定值来实时更新日期选择器。

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

<script>
export default {
  data() {
    return {
      dateValue: '' // 日期选择器的初始值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 基本使用：用户可以通过选择日期更新 dateValue，v-model 确保绑定值与用户选择的日期同步。
  • image-20240808053553495

# 范围日期选择器

通过 type 属性启用

日期范围选择模式。

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateRange: [] // 范围选择的初始值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  • 范围选择：通过 type="daterange" 启用，用户可以选择一段日期范围，dateRange 数组将存储用户选择的开始日期和结束日期。
  • image-20240808053645698

# 月份范围选择器

通过 type 属性启用月份范围选择模式。

<template>
  <el-date-picker
    v-model="monthRange"
    type="monthrange"
    range-separator="至"
    start-placeholder="开始月份"
    end-placeholder="结束月份"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      monthRange: [] // 月份范围选择的初始值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  • 月份范围选择：通过 type="monthrange" 启用，用户可以选择一段月份范围，monthRange 数组将存储用户选择的开始月份和结束月份。
  • image-20240808053725220

# 禁用特定日期的日期选择器

通过 disabledDate 设置禁用特定日期。

<template>
  <el-date-picker
    v-model="dateValue"
    :picker-options="{
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;
      }
    }"
    placeholder="选择日期"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateValue: '' // 日期选择器的初始值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • 禁用日期：通过 picker-options 中的 disabledDate 方法禁用特定日期，例如禁用今天之前的日期。
  • image-20240808053755665

# 快捷选项日期选择器

通过 shortcuts 设置日期选择器的快捷选项。

<template>
  <el-date-picker
    v-model="dateValue"
    type="daterange"
    :picker-options="{
      shortcuts: [
        {
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        },
        {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setDate(date.getDate() - 1);
            picker.$emit('pick', [date, date]);
          }
        }
      ]
    }"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateValue: [] // 快捷选项的初始值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  • 快捷选项：通过 picker-options 中的 shortcuts 属性设置快捷选项，用户可以快速选择常用日期范围。
  • image-20240808053859414

# 周选择器

通过 type 属性启用周选择模式。

<template>
  <el-date-picker
    v-model="weekValue"
    type="week"
    format="yyyy 第 WW 周"
    placeholder="选择周"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      weekValue: '' // 周选择器的初始值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • 周选择：通过 type="week" 启用，用户可以选择特定的一周。
  • image-20240808053929471

# 月选择器

通过 type 属性启用月选择模式。

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

<script>
export default {
  data() {
    return {
      monthValue: '' // 月选择器的初始值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 月选择：通过 type="month" 启用，用户可以选择特定的月份。
  • image-20240808054015037

# 年选择器

通过 type 属性启用年选择模式。

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

<script>
export default {
  data() {
    return {
      yearValue: '' // 年选择器的初始值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 年选择：通过 type="year" 启用，用户可以选择特定的年份。
  • image-20240808054049061

# 3. 事件处理示例

# 监听日期变化事件

使用 change 事件监听日期选择器的值变化。

<template>
  <el-date-picker
    v-model="dateValue"
    @change="handleChange"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateValue: '' // 日期选择器的初始值
    };
  },
  methods: {
    handleChange(value) {
      console.log('选定的日期为:', value);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • 事件监听：通过 change 事件监听日期选择器的值变化，并执行回调函数 handleChange，可以在控制台输出选定的日期。

总结

  • 多样化的选择类型：Element-UI 的日期选择器支持单日期、日期范围、周、月、年等多种选择类型。
  • 灵活的属性配置：通过 type、picker-options、format 等属性可以自定义日期选择器的行为。
  • 丰富的事件处理：支持 change、blur、focus 等事件，允许开发者在日期值变化时进行自定义处理。
  • 快捷选项与禁用日期：通过 shortcuts 设置快捷选项，通过 disabledDate 方法禁用特定日期，增强用户体验。
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
时间选择器（TimePicker）
日期时间选择器（DateTimePicker）

← 日期时间选择器（DateTimePicker）→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar