84 lines
3.3 KiB
Vue
84 lines
3.3 KiB
Vue
<template>
|
|
<row>
|
|
<i-col span="12">
|
|
<Date-picker type="datetime" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker>
|
|
</i-col>
|
|
<i-col span="12">
|
|
<Date-picker type="datetimerange" :options="options2" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
|
|
</i-col>
|
|
</row>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
options1: {
|
|
shortcuts: [
|
|
{
|
|
text: '今天',
|
|
value () {
|
|
return new Date();
|
|
},
|
|
onClick: (picker) => {
|
|
this.$Message.info('点击了今天');
|
|
}
|
|
},
|
|
{
|
|
text: '昨天',
|
|
value () {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
return date;
|
|
},
|
|
onClick: (picker) => {
|
|
this.$Message.info('点击了昨天');
|
|
}
|
|
},
|
|
{
|
|
text: '一周前',
|
|
value () {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
return date;
|
|
},
|
|
onClick: (picker) => {
|
|
this.$Message.info('点击了一周前');
|
|
}
|
|
}
|
|
]
|
|
},
|
|
options2: {
|
|
shortcuts: [
|
|
{
|
|
text: '最近一周',
|
|
value () {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
return [start, end];
|
|
}
|
|
},
|
|
{
|
|
text: '最近一个月',
|
|
value () {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
return [start, end];
|
|
}
|
|
},
|
|
{
|
|
text: '最近三个月',
|
|
value () {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
return [start, end];
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|