时间选择器datetimerpicker封装使用（非脚手架）

Posted 2022-01-12 Travelerᘗ

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 = "";
                
            )

 

 

没有人能一路单纯到底，但是要记住，别忘了最初的自己!