<!--DatePicker 日期选择器:用于选择或输入日期
1.选择日,以「日」为基本单位,基础的日期选择控件
基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDate 设置,传入函数-->
<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="pickerOptions1">
</el-date-picker>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
pickerOptions1: {
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);
}
}]
},
value1: '',
value2: '',
};
}
})
</script>
<!--2.其他日期单位
通过扩展基础的日期选择,可以选择周、月、年或多个日期-->
<div class="container">
<div class="block">
<span class="demonstration">周</span>
<el-date-picker
v-model="value3"
type="week"
format="yyyy 第 WW 周"
placeholder="选择周">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">月</span>
<el-date-picker
v-model="value4"
type="month"
placeholder="选择月">
</el-date-picker>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">年</span>
<el-date-picker
v-model="value5"
type="year"
placeholder="选择年">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">多个日期</span>
<el-date-picker
type="dates"
v-model="value14"
placeholder="选择一个或多个日期">
</el-date-picker>
</div>
</div>
<!--3.选择日期范围,可在一个选择器中便捷地选择一个时间范围
在选择日期范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份,可以使用unlink-panels属性解除联动。-->
<div class="block">
<span class="demonstration">默认</span>
{{value6}}
<el-date-picker
v-model="value6"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value7"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions2">
</el-date-picker>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
pickerOptions2: {
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]);
}
}]
},
value6: '',
value7: ''
};
}
})
</script>
<!--4.日期格式
使用format指定输入框的格式;使用value-format指定绑定值的格式。
默认情况下,组件接受并返回Date对象。-->
<div class="block">
<span class="demonstration">默认为 Date 对象</span>
<div class="demonstration">值:{{ value10 }}</div>
<el-date-picker
v-model="value10"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">使用 value-format</span>
<div class="demonstration">值:{{ value11 }}</div>
<el-date-picker
v-model="value11"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">值:{{ value12 }}</div>
<el-date-picker
v-model="value12"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="timestamp">
</el-date-picker>
</div>
<!--5.默认显示日期
在选择日期范围时,指定起始日期和结束日期的默认时刻。
选择日期范围时,默认情况下,起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过default-time可以分别指定二者的具体时刻。default-time接受一个数组,其中的值为形如12:00:00的字符串,第一个值控制起始日期的时刻,第二个值控制结束日期的时刻。-->
<div class="block">
<p>组件值:{{ value13 }}</p>
<el-date-picker
v-model="value13"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']">
</el-date-picker>
</div>
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
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/ week/datetime/datetimerange/daterange |
date |
format |
显示在输入框中的格式 |
string |
见日期格式 |
yyyy-MM-dd |
align |
对齐方式 |
string |
left, center, right |
left |
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 |
¶Picker Options
参数 |
说明 |
类型 |
可选值 |
默认值 |
shortcuts |
设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 |
Object[] |
— |
— |
disabledDate |
设置禁用状态,参数为当前日期,要求返回 Boolean |
Function |
— |
— |
¶Shortcuts
参数 |
说明 |
类型 |
可选值 |
默认值 |
text |
标题文本 |
string |
— |
— |
onClick |
选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) |
function |
— |
— |