【Quasar】【自定义组件】-日期范围选择器

实现效果：

• 可对选择的时间进行手动编辑
• 也可手动输入日期范围

 <date-picker v-model="dateRange"/>

dateRange:[]

dateRangle的值为：

<script>
import {date} from 'quasar'

const {formatDate, subtractFromDate,addToDate} = date

export default {
  name: 'DatePicker',
  props: {
    value: {
      type: Array,
      required: true
    },
    label: {
      type: String,
      default: ''
    },
    rangePresets: {
      type: Array,
      default: () => [
        {
          label: '当天',
          value: {
            from: formatDate(Date.now(), 'YYYY/MM/DD'),
            to: formatDate(Date.now(), 'YYYY/MM/DD')
          }
        },
        {
          label: '最近三天',
          value: {
            from: formatDate(subtractFromDate(Date.now(), {days: 3}), 'YYYY/MM/DD'),
            to: formatDate(Date.now(), 'YYYY/MM/DD')
          }
        },
        {
          label: '最近七天',
          value: {
            from: formatDate(subtractFromDate(Date.now(), {days: 3}), 'YYYY/MM/DD'),
            to: formatDate(addToDate(Date.now(), {days:4}),'YYYY/MM/DD')
          }
        },
        {
          label: '最近三十天',
          value: {
            from: formatDate(subtractFromDate(Date.now(), {days: 30}), 'YYYY/MM/DD'),
            to: formatDate(Date.now(), 'YYYY/MM/DD')
          }
        }
      ]
    }
  },
  data() {
    return {
      date: {},
      text: '',
    }
  },
  methods: {
    onDateChange(date) {
      if (date) {
        const {from, to} = date
        this.text = `${from}-${to}`
        this.$emit('input', [from, to])
      } else {
        this.text = ''
        this.$emit('input', [])
      }
    },
    isValidDateFormat(input) {
      // 创建一个正则表达式对象，用于匹配日期格式
      const datePattern = /^\d{4}\/\d{2}\/\d{2}-\d{4}\/\d{2}\/\d{2}$/;

      // 使用正则表达式的test方法检查输入的字符串是否符合预期的日期格式
      return datePattern.test(input);
    },
    isValidDateFormat2(input) {
      // 创建一个正则表达式对象，用于匹配日期格式
      const datePattern2 = /^\d{4}\/\d{2}\/\d{2} - \d{4}\/\d{2}\/\d{2}$/;

      // 使用正则表达式的test方法检查输入的字符串是否符合预期的日期格式
      return datePattern2.test(input);
    },
    changeDate(val) {
      // 2024/09/10-2024/09/10
      if ((this.isValidDateFormat(val) || this.isValidDateFormat2(val)) && val.replace(/\s+/g, '').length === 21 ) {
        const a1 = formatDate(val.replace(/\s+/g, '').slice(0, 10), 'YYYY/MM/DD')
        const a2 = formatDate(val.replace(/\s+/g, '').slice(11, 21), 'YYYY/MM/DD')
        // 创建Date对象
        const date1 = new Date(a1);
        const date2 = new Date(a2);
        // 获取时间戳
        const timestamp1 = date1.getTime();
        const timestamp2 = date2.getTime();
        // 比较时间戳
        if (timestamp1 <= timestamp2) {
          // 时间正确
          this.$emit('input', [a1, a2])
          this.text = `${a1}-${a2}`
        }else{
          this.$q.notify({
            type: 'negative',
            message: '开始时间不能大于结束时间!'
          })
        }
      }
    },

  },
  watch: {
    value: {
      immediate: true,
      handler([from, to]) {
        if (from && to) {
          this.date = {from, to}
          this.text = `${from}-${to}`
        } else {
          this.date = {}
          this.text = ''
        }
      }
    }
  }
}
</script>

<template>
  <q-input outlined dense label="时间" :value="text" @input="changeDate">
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer">
        <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
          <q-card>
            <q-card-section horizontal>
              <q-card-section class="q-px-none column">
                <q-btn
                    :key="label"
                    :label="label"
                    v-close-popup
                    padding="xs"
                    color="primary"
                    align="left" flat
                    @click="onDateChange(value)"
                    v-for="{ label, value } in rangePresets"
                />
              </q-card-section>
              <q-separator vertical/>
              <q-card-section class="q-pa-none">
                <q-date v-model="date" flat range minimal @input="onDateChange">
                  <div class="row items-center justify-end q-mt-xs">
                    <q-btn v-close-popup label="确定" color="primary"  />
                  </div>
                </q-date>
              </q-card-section>
            </q-card-section>
          </q-card>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>