flaschengeist-frontend/src/components/utils/IsoDateInput.vue

<template>
  <q-input
    filled
    :readonly="readonly"
    :label="label"
    :value="getDateTime()"
    :placeholder="placeholder"
    v-on:input="dateChanged"
    :rules="rules"
  >
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer" v-if="type == 'date' || type == 'datetime'">
        <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
          <q-date :value="getDate()" mask="YYYY-MM-DD" v-on:input="dateChanged">
            <div class="row items-center justify-end">
              <q-btn v-close-popup label="Schließen" color="primary" flat />
            </div>
          </q-date>
        </q-popup-proxy>
      </q-icon>
      <q-icon
        name="mdi-clock-outline"
        class="cursor-pointer"
        v-if="type == 'time' || type == 'datetime'"
      >
        <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
          <q-time :value="getTime()" mask="HH:mm" v-on:input="timeChanged">
            <div class="row items-center justify-end">
              <q-btn v-close-popup label="Schließen" color="primary" flat />
            </div>
          </q-time>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import { date } from 'quasar';
interface Props {
  value?: Date;
  label?: string;
  readonly: boolean;
  type: string;
}

export default defineComponent({
  name: 'IsoDateInput',
  props: {
    value: {
      required: true
    },
    label: {},
    readonly: {
      default: false
    },
    type: {
      default: 'date',
      validator: function(value: string) {
        return ['date', 'time', 'datetime'].indexOf(value) !== -1;
      }
    }
  },
  setup(props: Props, { emit }: { emit: any }) {
    function getDateTime() {
      if (props.value) {
        switch (props.type) {
          case 'date':
            return getDate();
          case 'time':
            return getTime();
          case 'datetime':
            return `${getDate()} ${getTime()}`;
        }
      }
    }

    function getDate() {
      if (props.value) {
        return date.formatDate(props.value, 'YYYY-MM-DD');
      }
      return '';
    }
    function getTime() {
      if (props.value) {
        return date.formatDate(props.value, 'HH:mm');
      }
      return '';
    }

    const _date = ref('');
    const _time = ref('');
    const placeholder = computed(() => {
      switch (props.type) {
        case 'date':
          return 'YYYY-MM-DD';
          break;
        case 'time':
          return 'HH:mm';
        case 'datetime':
          return 'YYYY-MM-DD HH:mm';
      }
    });

    function dateChanged(dateString: string) {
      _date.value = dateString;
      console.log('dateChanged', new Date(`${_date.value} ${_time.value}`));
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      emit('input', new Date(`${_date.value} ${_time.value}`));
    }

    function timeChanged(timeString: string) {
      _time.value = timeString;
      if (_date.value == '') {
        _date.value = date.formatDate(new Date(), 'YYYY-MM-DD');
      }
      console.log('timeChanged', new Date(`${_date.value} ${_time.value}`));
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      emit('input', new Date(`${_date.value} ${_time.value}`));
    }

    function isDate(val: string) {
      return !val || /^\d{4}-\d\d-\d\d$/.test(val) || 'Datum ist nicht gültig.';
    }

    function isTime(val: string) {
      return !val || /^\d\d:\d\d$/.test(val) || 'Zeit ist nicht gültig.';
    }

    function isDateTime(val: string) {
      return !val || /^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(val) || 'Datum und Zeit ist nicht gültig.';
    }

    const rules = computed(() => {
      switch (props.type) {
        case 'date':
          return [isDate];
          break;
        case 'time':
          return [isTime];
          break;
        case 'datetime':
          return [isDateTime];
          break;
      }
    });

    return {
      getDate,
      getTime,
      getDateTime,
      dateChanged,
      rules,
      timeChanged,
      placeholder
    };
  }
});
</script>