日期组件

约 742 字大约 2 分钟

2025-08-15

引入组件

<el-form-item label="时间范围">
    <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
    :default-value="defaultDateRange"
    :shortcuts="dateShortcuts"
    style="width: 280px;"
    />
</el-form-item>

dateRange 绑定值
shortcuts 快捷选项，支持一个月、一个星期查询

const dateRange = ref([])

// 计算默认日期范围（最近6个月）
const getDefaultDateRange = () => {
    const end = new Date()
    const start = new Date()
    start.setMonth(start.getMonth() - 6)

    const formatDate = (date) => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
    }

    return [formatDate(start), formatDate(end)]
}

// 默认日期范围
const defaultDateRange = computed(() => {
    const end = new Date()
    const start = new Date()
    start.setMonth(start.getMonth() - 6)
    return [start, end]
})

// 日期快捷选项
const dateShortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        }
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        }
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        }
    },
    {
        text: '最近六个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            return [start, end]
        }
    }
]

在请求的时候，可以从dateRange.value 中获取开始时间和结束时间，并拼接成时间范围 dateRange.value[0] + ' 00:00:00' dateRange.value[1] + ' 23:59:59'

获取时间范围

  <el-date-picker
    v-model="dateRange"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
    :default-time="defaultTime"
    :default-value="defaultDateRange"
    :shortcuts="dateShortcuts"
    style="width: 380px;"
  />

const dateRange = ref([])

// 计算默认日期范围（包含时分秒）
const getDefaultDateRange = () => {
    const end = new Date()
    const start = new Date()
    start.setMonth(start.getMonth() - 1)

    start.setHours(0, 0, 0, 0)
    end.setHours(23, 59, 59, 999)

    const formatDateTime = (date) => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }

    return [formatDateTime(start), formatDateTime(end)]
}

// 默认日期范围（用于计算属性）
const defaultDateRange = computed(() => {
    const end = new Date()
    const start = new Date()
    start.setMonth(start.getMonth() - 6)
    start.setHours(0, 0, 0, 0)
    end.setHours(23, 59, 59, 999)
    return [start, end]
})

// 日期快捷选项（只声明一次）
const dateShortcuts = [
    {
        text: '今天',
        value: () => {
            const start = new Date()
            start.setHours(0, 0, 0, 0)
            const end = new Date()
            end.setHours(23, 59, 59, 999)
            return [start, end]
        }
    },
    {
        text: '昨天',
        value: () => {
            const start = new Date()
            start.setDate(start.getDate() - 1)
            start.setHours(0, 0, 0, 0)
            const end = new Date()
            end.setDate(end.getDate() - 1)
            end.setHours(23, 59, 59, 999)
            return [start, end]
        }
    },
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            end.setHours(23, 59, 59, 999)
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            start.setHours(0, 0, 0, 0)
            return [start, end]
        }
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            end.setHours(23, 59, 59, 999)
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            start.setHours(0, 0, 0, 0)
            return [start, end]
        }
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            end.setHours(23, 59, 59, 999)
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            start.setHours(0, 0, 0, 0)
            return [start, end]
        }
    },
    {
        text: '最近六个月',
        value: () => {
            const end = new Date()
            end.setHours(23, 59, 59, 999)
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            start.setHours(0, 0, 0, 0)
            return [start, end]
        }
    }
]