vue框架中实现今天昨天前天最近时间

点击下拉出几个选项，根据日期不同来过滤数据。看图--（忽略小梨子，这是日常练手页面）

（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。