<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="app" style="width:50%;margin:0 auto;">
<!-- 选择日:以「日」为基本单位，基础的日期选择控件
基本单位由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="pickerOptions">
</el-date-picker>
</div>
<!-- 其他日期单位:通过扩展基础的日期选择，可以选择周、月、年或多个日期 -->
<div class="container">
<div class="block">
<span class="demonstration">周</span>
<el-date-picker
v-model="value1"
type="week"
format="yyyy 第 WW 周"
placeholder="选择周">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">月</span>
<el-date-picker
v-model="value2"
type="month"
placeholder="选择月">
</el-date-picker>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">年</span>
<el-date-picker
v-model="value3"
type="year"
placeholder="选择年">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">多个日期</span>
<el-date-picker
type="dates"
v-model="value4"
placeholder="选择一个或多个日期">
</el-date-picker>
</div>
</div>
<!-- 选择日期范围:在选择日期范围时，默认情况下左右面板会联动。
如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动 -->
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions1">
</el-date-picker>
</div>
<!-- 默认显示日期:选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。
通过default-time可以分别指定二者的具体时刻。default-time接受一个数组，
其中的值为形如12:00:00的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻 -->
<div class="block">
<p>组件值：{{ value }}</p>
<el-date-picker
v-model="value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']">
</el-date-picker>
</div>
</div>
<script>
new Vue({
el:'.app',
data() {
return {
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);
}
}]
},
pickerOptions1: {
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]);
}
}]
},
value1: '',
value2: '',
value3: '',
value4: '',
value:''
};
}
})
</script>
</body>
</html>
