Element + Vue 之 封裝的日期組件

該組件有限制不能選擇當天之後的日期，根據不同的模塊去返回值，還有重置日期的功能

需要父組件傳的值有

• date_module 當前操作模塊的名字(用來區分模塊，不影響一個頁面引用多個組件而導致選擇器綁定值衝突)
• clearStatus 根據不同的需求（需要重置），來判斷是否重置當前日期選擇器組件的綁定值

<template>
    <el-date-picker
    style="width: 247px;height:32px;padding: 0 15px;"
    v-model="value"
    :clearable="false"
    type="daterange"
    range-separator="~"
    start-placeholder="開始日期"
    end-placeholder="結束日期"
    :picker-options="pickerOptions"
    @change="changeDate"
    :default-time="['00:00:00','23:59:59']">
    </el-date-picker>
</template>
<script>
export default {
    name: 'dateSelect',
    props: ['day','date_module','clearStatus'],
    data(){
        return {
            value:[new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000*7),new Date(new Date().setHours(23, 59, 59, 59))],
            // 日期選擇器快捷選項
            pickerOptions: {
                disabledDate(time){
                    return time.getTime() > new Date( new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1);
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date(new Date().setHours(23, 59, 59, 59))
                        const start = new Date(new Date().setHours(0, 0, 0, 0));
                        // start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const end = new Date(new Date().setHours(23, 59,59, 59)-24*60*60*1000);
                        const start = new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '過去7天',
                    onClick(picker) {
                        const end = new Date(new Date().setHours(23, 59, 59, 59))
                        const start = new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000*7);;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '過去30天',
                    onClick(picker) {
                    const end = new Date(new Date().setHours(23, 59, 59, 59))
                    const start = new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000*30);;
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                }, {
                    text: '過去60天',
                    onClick(picker) {
                    const end = new Date(new Date().setHours(23, 59, 59, 59))
                    const start = new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000*60);;
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                }, {
                    text: '過去90天',
                    onClick(picker) {
                    const end = new Date(new Date().setHours(23, 59, 59, 59))
                    const start = new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000*90);;
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '過去120天',
                    onClick(picker) {
                    const end = new Date(new Date().setHours(23, 59, 59, 59))
                    const start = new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000*120);;
                    picker.$emit('pick', [start, end]);
                    }
                }]
            }
        }
    },
    created(){
        let date = []
        let nowDate = new Date(new Date().setHours(23, 59, 59, 59))
        let oldDate = new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000*7)
        date.date_module = this.date_module
        if(this.date_module === 'access' || this.date_module === 'inquire' || this.date_module === 'log') {
            date.date = []
            this.value = []
            this.$emit('selectTime',date)
        }else {
            this.value = [new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000*7),new Date(new Date().setHours(23, 59, 59, 59))]
            date.date = []
            this.$emit('selectTime',date)
        }
    },
    methods: {
        getDay(day){                        // 計算日期
        　　var today = new Date();
        　　var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
        　　today.setTime(targetday_milliseconds); //注意，這行是關鍵代碼
        　　var tYear = today.getFullYear();
        　　var tMonth = today.getMonth();
        　　var tDate = today.getDate();
        　　tMonth = this.doHandleMonth(tMonth + 1);
        　　tDate =  this.doHandleMonth(tDate);
        　　return tYear+"-"+tMonth+"-"+tDate;
        },
        doHandleMonth(month){               // 計算日期
        　　var m = month;
        　　if(month.toString().length == 1){
          　　m = "0" + month;
        　　}
        　　return m;
        },
        changeDate(val){					// 判斷是否重置日期選擇器綁定值
                let date = []
                let nowDate = Math.floor(val[0].getTime()/1000)
                let oldDate = Math.floor(val[1].getTime()/1000)
                date.date = [nowDate,oldDate]
                date.date_module = this.date_module
                this.$emit('selectTime',date)
        }
    },
    watch: {
        date_module(val){
            // console.log(val)
        },
        clearStatus(){
            if(this.date_module === 'access' || this.date_module === 'inquire' || this.date_module === 'log') {
                this.value = []
            }
        }
    }
}
</script>

<style lang="less" scoped>
@media (max-width: 600px) {
    .el-date-editor {
        width: 100% !important;
        max-width: 100% !important;
    }
}
</style>

父組件調用

 <dateselect class="inquireDate" v-on:selectTime="selectTime" :clearStatus="clearStatus" :date_module="'inquire'" />

v-on:selectTime: 用來接收日期組件傳過來的值
date_module： 用來區分不同的模塊給不同的變量賦值
clearStatus： 有的模塊有重置按鈕，根據傳值判斷是否重置日期選擇器內容