datePicker.vue 封装

<template>
    <el-date-picker
            v-model="currentTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="~"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="getChorceTime">
    </el-date-picker>
</template>

<script>

    module.exports = {
        name: "datePicker",
        props: ['time'],
        data() {
            return {
                currentTime: "",
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                },
            }
        },
        methods:{
            getChorceTime(val){
                if(val == null){
                    bus.$emit('changeTimeValue',"");
                }else{
                    bus.$emit('changeTimeValue',val)
                }
            }
        }
    }
</script>

<style scoped>

</style>

注意：

 value-format ：一定要，否则选择的时间是带有英文月份的时间，不是想要的年月日时分秒

　

getChorceTime(val){
                if(val == null){
                    bus.$emit('changeTimeValue',""); // 必要：当交互中清除已选时间时查询条件应该清空
                }else{
                    bus.$emit('changeTimeValue',val) // 传递当前选择的时间

} }

 

 

使用

js.
module.exports = {
        name:'FileUpload',
        components: {
            'date-picker': httpVueLoader('/template/default/pc/home/index/components/datePicker.vue'),
        },
}

<template>

<date-picker :time="searchForm.time"></date-picker>

</template>

核心：
 mounted(){
            bus.$on('changeTimeValue',(val)=>{
                if(val){
                    this.searchForm.time = val[0] + '~' + val[1];
                }else{
                    this.searchForm.time = "";
                }
            })
}