标签：picker const val 脚手架 emit start Date 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 = "";
                }
            })
}

标签：picker,const,val,脚手架,emit,start,Date,datetimerpicker,选择器
来源： https://www.cnblogs.com/LindaBlog/p/15791230.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。