frames/components/Ui/Search/DateRangePickerCustom.vue

<template >
  <div v-click-outside="onOutsideClick">
    <v-text-field
      v-model="dateIntervalText"
      type="text"
      class="text-field"
      outlined
      readonly
      clearable
      hide-details
      :label="$t('when') + ' ?'"
      append-icon="mdi-calendar"
      @click="onClick"
      @change="$emit('change', $event ? $event.value : '')"
      @click:append="onClick"
    />

    <v-card v-show="show" class="date-picker pa-2">
      <div class="d-flex flex-row">
        <div class="presets">
          <a
            v-for="preset in presets"
            class="preset-link"
            @click="presetClicked(preset.range)"
          >
            {{ preset.label }}
          </a>
        </div>

        <v-date-picker
          ref="datePicker1"
          :value="isoDateStart"
          range
          :min="today"
          scrollable
          no-title
          locale="fr"
          @change="dateRangeChanged"
        />
      </div>
    </v-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { format, parse, addDays, addMonths, nextSunday } from 'date-fns'

interface DateRangePreset {
  label: string,
  range: DateRange
}

export default Vue.extend({
  props: {
    value: {
      type: Object
    }
  },
  data () {
    return {
      model: null as DateRange | null,
      dateStart: null as Date | null,
      dateEnd: null as Date | null,
      show: false
    }
  },
  methods: {
    onClick() {
      this.show = !this.show
    },
    onOutsideClick() {
      this.show = false
    },
    presetClicked(range: DateRange) {
      this.dateStart = range.start
      this.dateEnd = range.end
    },
    clear () {
      this.dateStart = null
      this.dateEnd = null
    },
    dateToString(date: Date | null) {
      return date !== null ? format(date, 'yyyy-MM-dd') : ''
    },
    stringToDate(date: string) {
      return new Date(date)
    }
  },
  computed: {
    today() {
      return format(new Date(), 'yyyy-MM-dd')
    },
    presets (): Array<DateRangePreset> {
      const today = new Date()

      // Today
      const today_preset: DateRangePreset = {
        label: this.$t('today').toString(),
        range: {start: today, end: today}
      }

      // Cette semaine
      const week_preset: DateRangePreset = {
        label: this.$t('next_week').toString(),
        range: {start: today, end: addDays(today, 7)}
      }

      // Ce week-end
      const sunday: Date = nextSunday(today)
      const weekend_preset = {
        label: this.$t('next_weekend').toString(),
        range: {start: addDays(sunday, -1), end: sunday}
      }

      // Ce mois
      const month_preset: DateRangePreset = {
        label: this.$t('next_month').toString(),
        range: {start: today, end: addMonths(today, 1)}
      }

      return [today_preset, week_preset, weekend_preset, month_preset]
    },
    dateIntervalText (): string {
      if (this.dateStart !== null && this.dateEnd !== null) {
        return format(this.dateStart, 'dd/MM/yyyy') + ' ~ ' + format(this.dateEnd, 'dd/MM/yyyy')
      } else if (this.dateStart !== null) {
        return format(this.dateStart, 'dd/MM/yyyy') + ' ~ ?'
      } else if (this.dateEnd !== null) {
        return '? ~ ' + format(this.dateEnd, 'dd/MM/yyyy')
      } else {
        return ''
      }
    }
  }
})
</script>

<style scoped>

.date-picker {
  z-index: 1;
  position: absolute;
}

.presets {
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-width: 120px;
  font-size: 14px;
}

.preset-link {
  padding: 12px 0;
}

.preset-link:hover {
  text-decoration: underline;
}

</style>