点击下拉出几个选项,根据日期不同来过滤数据。看图--(忽略小梨子,这是日常练手页面)
(element ui)
点击today-当天日期
点击last three days
点击custom,并且实现右侧结束日期必须大于左侧(左边先选,右边无法选择比左边小的)
首先呢--先弄它个按钮下拉玩玩,,下拉数据v-for遍历,
@click.native="filterTime(menu)"
根据interval不同来判断不同时间段(在data--menus中)
<el-dropdown size="small" trigger="click">
<el-button type="primary">
paid Time<i class="el-icon-arrow-down el-icon--right" />
</el-button>
<el-dropdown-menu>
<el-dropdown-item v-for="menu in menus" @click.native="filterTime(menu)">
{{ menu.title }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
获取到的日期渲染到页面上--
<span v-if="timeData">
<el-tag
color="white"
style="font-size: 15px;"
>
{{ timeData }}
</el-tag>
</span>
日期选择是点击弹出个弹窗,在弹窗中选择。,
:picker-options="pickerOptionsStart"
:picker-options="pickerOptionsEnd"
在data中判定起止时间大于的问题
<el-dialog title="Choice Time" :visible.sync="dialogVisible" width="40%">
<div style="padding-top: 10px;" :data="timePo">
<el-date-picker
v-model="start"
type="date"
value-format="yyyy-MM-dd"
placeholder="Choose the date and time"
:picker-options="pickerOptionsStart"
style="margin-right: 10px;"
@change="startTimeStatus"
/>
to
<el-date-picker
v-model="end"
type="date"
value-format="yyyy-MM-dd"
placeholder="Choose the date and time"
:picker-options="pickerOptionsEnd"
style="margin-left: 10px;"
@change="endTimeStatus"
/>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">cancel</el-button>
<el-button type="primary" @click="saveTime">submit</el-button>
</div>
</el-dialog>
下面是一些数据,start是开始日期,end是结束日期。menus为下拉框中数据。
data() {
return {
start: '',
end: '',
dialogVisible: false,
timeData: '',
menus: [
{ title: 'today', interval: 0 },
{ title: 'yesterday', interval: 1 },
{ title: 'Last Three Days', interval: 2 },
{ title: 'one Week', interval: 6 },
{ title: 'custom', interval: -1 }
],
pickerOptionsStart: {
disabledDate: time => {
const endDateVal = this.end
if (endDateVal) {
return time.getTime() > new Date(endDateVal).getTime()
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
const beginDateVal = this.start
if (beginDateVal) {
return time.getTime() < new Date(beginDateVal).getTime()
}
}
}
}
},
在methods中 ,,年+月+日,简单的获取和赋值,调用:时间戳转换成 xxxx-xx-xx格式。
timeFormat(date) {
const year = date.getFullYear()
let month = (date.getMonth() + 1) + ''
month = month.length === 1 ? '0' + month : month
let day = date.getDate() + ''
day = day.length === 1 ? '0' + day : day
return year + '-' + month + '-' + day
},
根据前面说的来判定。timePo是后台提供的字段,获取到的start,end日期通过props传值,后台来进行过滤。
if对比不等于 -1 ,不等于的话 获取当天时间定义为end,减去选择的天数是start。endStr和startStr是转换格式后的日期。
filterTime(menu) {
const interval = menu.interval
if (interval !== -1) {
const end = new Date()
const time = end.getTime() - interval * 24 * 60 * 60 * 1000
const start = new Date(time)
const endStr = this.timeFormat(end)
const startStr = this.timeFormat(start)
this.timePo = Object.assign(this.timePo,
{
field: 'updated_at',
start: startStr + this.split + '00:00:00',
end: endStr + this.split + '23:59:59'
这里为啥这样呢,是因为在过滤的时候没加这些,有部分订单是不显示的(俺也不知道具体为啥)
}
)
this.timeData = startStr + ' => ' + endStr
this.fatherInit()
} else {
this.start = ''
this.end = ''
this.dialogVisible = true
}
},
下面是弹窗中日期的赋值,。
// 弹窗赋值
saveTime() {
this.timeData = this.start + ' => ' + this.end
this.dialogVisible = false
this.timePo = Object.assign(this.timePo,
{
field: 'updated_at',
start: this.start + this.split + '00:00:00',
end: this.end + this.split + '23:59:59'
}
)
this.fatherInit()
},
cancel() {
this.dialogVisible = false
},
// 时间开始选择器
startTimeStatus: function(value) {
this.start = value
},
// 时间结束选择器
endTimeStatus: function(value) {
this.end = value
}
}
over。