随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

时间选择器datetimerpicker封装使用(非脚手架)

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 = ""; } }) }
复制代码

 

 
复制代码

 

posted on   小虾米吖~  阅读(238)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示