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。