目录
- 前言
- [1. 通用Demo](#1. 通用Demo)
- [2. 快捷键](#2. 快捷键)
- [3. 参数](#3. 参数)
前言
对于全栈玩家,各个组件都需相应了解才可做好前后端的CRUD
以下为实战结合Element官网的心得体会
如图所示:
1. 通用Demo
如果只想要一个选择日期,而不是范围,Demo如下:
html
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
截图如下:
如果需要时间选择,总体Demo如下:
html
<template>
<!-- 包含快捷选项的日期选择器 -->
<div class="block">
<!-- 演示快捷选项 -->
<span class="demonstration">带快捷选项</span>
<!-- 日期选择器组件 -->
<el-date-picker
v-model="value2"
type="datetimerange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
// 日期选择器的选项
pickerOptions: {
// 快捷选项
shortcuts: [
// 最近一周
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
},
// 最近一个月
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
},
// 最近三个月
{
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}
]
},
// 绑定的值1
value1: '',
// 绑定的值2
value2: ''
};
}
};
</script>
具体的参数解释如下:
- unlink-panels解除左右面板的联动(各自独立切换当前月份),选择日期范围时,默认情况下左右面板会联动
- type为daterange,则显示到日,若为datetimerange则显示到秒
如果是按照默认月份,具体如下:
html
<template>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '本月',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: '今年至今',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近六个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
截图如下:
2. 快捷键
对于快捷键选项除了实现上述方案还可如下:
js
// 时间选择
pickerOptions: {
shortcuts: [{
text: '上周',
onClick(picker) {
const end = new Date();
const start = new Date();
// 设置起始日期为本周的第一天
start.setDate(end.getDate() - end.getDay() - 6);
// 设置结束日期为本周的最后一天
end.setDate(end.getDate() - end.getDay() );
picker.$emit('pick', [start, end]);
}
}, {
text: '这周',
onClick(picker) {
const end = new Date();
const start = new Date();
// 设置起始日期为本周的第一天
start.setDate(end.getDate() - end.getDay() + 1);
// 设置结束日期为本周的最后一天
end.setDate(end.getDate() - end.getDay() + 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '下周',
onClick(picker) {
const end = new Date();
const start = new Date();
// 设置起始日期为下周的第一天
start.setDate(end.getDate() - end.getDay() + 8);
// 设置结束日期为下周的最后一天
end.setDate(end.getDate() - end.getDay() + 14);
picker.$emit('pick', [start, end]);
}
}]
},
截图如下:
js
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
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);
}
}]
},
截图如下:
3. 参数
更多的参数解释如下:
格式 | 含义 | 备注 | 例子 |
---|---|---|---|
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 可用;组件绑定值为number类型 | 1483326245000 |
[MM] | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM |
对于日期选择的更多参数说明:
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 见日期格式 --- | |||
unlink-panels | 在范围选择器里取消两个日期面板之间的联动 boolean --- false | |||
prefix-icon | 自定义头部图标的类名 | string | el-icon-date | |
clear-icon | 自定义清空图标的类名 | string | el-icon-circle-close | |
validate-event | 输入时是否触发表单的校验 | boolean | true | |
append-to-body | DetePicker 自身是否插入至 body 元素上。 | boolean | true |