element日期时间选择器+自定义外部选择时间范围快捷键

本文链接：https://blog.youkuaiyun.com/qq_41775006/article/details/111252707

这篇博客展示了如何在Vue.js中创建一个时间选择器组件，并结合按钮快捷选择时间范围。当用户选择时间范围后，可以点击按钮同步数据。代码包括模板和JavaScript部分，其中涉及日期处理和时间格式化，以及模拟的`syncData`方法来展示如何获取选定的时间范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

template代码

<template>
    <div>
        <el-form class="dataForm" label-width="100px">
            <el-form-item label="同步时间：">
                <el-date-picker
                    v-model="date"
                    type="datetimerange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-button-group style="margin-left:15px">
                    <el-button type="success" @click="selectDate(1)" size="small">1 天</el-button>
                    <el-button type="primary" @click="selectDate(2)" size="small">2 天</el-button>
                    <el-button type="warning" @click="selectDate(3)" size="small">3 天</el-button>
                </el-button-group>
            </el-form-item>
            <el-form-item label-width="0">
                <el-button icon="el-icon-refresh" type="primary" @click="syncData">同步数据</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

js代码

<script>
import {GetAlibabaOrder} from 'network/v1/alibaba/index'
export default {
    name:'syncOrder',
    data(){
        return{
            date:[],
        }
    },
    mounted(){
    	//默认初始化时选中一天
        this.date = []
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
        this.date.push(start)
        this.date.push(end)
    },
    methods:{
        // 选择时间快捷键
        selectDate(num){
            this.date = []
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * num);
            this.date.push(start)
            this.date.push(end)
        },
        // 同步数据
        syncData(){
        	//时间小于10的部分自动补0
            let d = this.date[0]
            let start_time = d.getFullYear() + '-' + ((d.getMonth() + 1)<10?("0"+(d.getMonth() + 1)):(d.getMonth() + 1)) + '-' + (d.getDate()<10?("0"+d.getDate()):d.getDate()) +' '+ (d.getHours()<10?("0"+d.getHours()):d.getHours())+':'+(d.getMinutes()<10?("0"+d.getMinutes()):d.getMinutes())+':'+(d.getSeconds()<10?("0"+d.getSeconds()):d.getSeconds())
            let a = this.date[1]
            let end_time = a.getFullYear() + '-' + ((a.getMonth() + 1)<10?("0"+(a.getMonth() + 1)):(a.getMonth() + 1)) + '-' + (a.getDate()<10?("0"+a.getDate()):a.getDate()) +' '+ (a.getHours()<10?("0"+a.getHours()):a.getHours())+':'+(a.getMinutes()<10?("0"+a.getMinutes()):a.getMinutes())+':'+(a.getSeconds()<10?("0"+a.getSeconds()):a.getSeconds())
            console(start_time,end_time)
        }
    }
}
</script>