ln-web/src/components/rangePicker/index.vue

<template>
  <a-range-picker
    v-model:value="rangeTimes"
    :show-time="props.showTime"
    :valueFormat="props.valueFormat"
    :presets="props.rangePresets"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import dayjs, { type Dayjs } from 'dayjs'

defineOptions({
  name: 'rangePicker',
})

type RangeValue = [Dayjs, Dayjs]
interface Props {
  start: string | Dayjs // 开始时间
  end: string | Dayjs // 结束时间
  showTime?: boolean // 是否显示时间选择器
  valueFormat?: string // 时间格式
  rangePresets?: {
    label: string
    value: RangeValue
  }[]
}

const emit = defineEmits<{
  (e: 'update:start', value: string): void
  (e: 'update:end', value: string): void
}>()
const props = withDefaults(defineProps<Props>(), {
  start: '',
  end: '',
  showTime: false,
  valueFormat: 'YYYY-MM-DD', // 时间格式 YYYY-MM-DD HH:mm:ss
  rangePresets: () => [
    { label: '今天', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
    { label: '最近7天', value: [dayjs().add(-6, 'd').startOf('day'), dayjs().endOf('day')] },
    { label: '最近14天', value: [dayjs().add(-13, 'd').startOf('day'), dayjs().endOf('day')] },
    { label: '最近30天', value: [dayjs().add(-29, 'd').startOf('day'), dayjs().endOf('day')] },
    { label: '最近90天', value: [dayjs().add(-89, 'd').startOf('day'), dayjs().endOf('day')] },
  ],
})

const rangeTimes = computed({
  get: () => {
    if (props.start && props.end) {
      const isValidRange = [props.start, props.end].every((v) => dayjs(v).isValid())

      return isValidRange
        ? [
            dayjs.isDayjs(props.start) ? props.start : dayjs(props.start),
            dayjs.isDayjs(props.end) ? props.end : dayjs(props.end),
          ]
        : undefined
    }
    return undefined
  },
  set: (val: RangeValue | undefined) => {
    if (Array.isArray(val) && val.length === 2) {
      const start = dayjs(val[0])
      const end = dayjs(val[1])

      const format = (d: Dayjs) => {
        const date = dayjs(d)
        return date.isValid() ? date.format(props.valueFormat) : ''
      }

      emit('update:start', start.isValid() ? format(val[0]) : '')
      emit('update:end', end.isValid() ? format(val[1]) : '')
    } else {
      emit('update:start', '')
      emit('update:end', '')
    }
  },
})
</script>

<style scoped lang="less"></style>