AppDate.vue

<template>
  <q-input
    :mask="mask"
    :value="inputValue"
    @input="inputUpdateValue($event)"
    v-bind="inputAttrs"
  >
    <template v-slot:append>
      <DateWidgetDate
        :format="format"
        :value="widgetValue"
        @input="widgetUpdateValue($event)"
      />
    </template>
  </q-input>
</template>

<script>
import MixinPropsDate from 'src/app/Components/Date/MixinPropsDate'
import MixinBehaviour from 'src/app/Components/Date/MixinBehaviour'
import DateWidgetDate from 'src/app/Components/Date/DateWidgetDate'

export default {
  /**
   */
  name: 'AppDate',
  /**
   */
  components: { DateWidgetDate },
  /**
   */
  mixins: [MixinPropsDate, MixinBehaviour]
}
</script>

<style scoped>

</style>

AppDatetime.vue

<template>
  <q-input
    :mask="mask"
    :value="inputValue"
    @input="inputUpdateValue($event)"
    v-bind="inputAttrs"
  >
    <template v-slot:prepend>
      <DateWidgetDate
        :format="format"
        :value="widgetValue"
        @input="widgetUpdateValue($event)"
      />
    </template>
    <template v-slot:append>
      <DateWidgetDatetime
        :format="format"
        :value="widgetValue"
        @input="widgetUpdateValue($event)"
      />
    </template>
  </q-input>
</template>

<script>
import MixinPropsDatetime from 'src/app/Components/Date/MixinPropsDatetime'
import MixinBehaviour from 'src/app/Components/Date/MixinBehaviour'
import DateWidgetDate from 'src/app/Components/Date/DateWidgetDate'
import DateWidgetDatetime from 'src/app/Components/Date/DateWidgetDatetime'

export default {
  /**
   */
  name: 'AppDate',
  /**
   */
  components: { DateWidgetDate, DateWidgetDatetime },
  /**
   */
  mixins: [MixinPropsDatetime, MixinBehaviour]
}
</script>

<style scoped>

</style>

DateWidgetDate.vue

<template>
  <q-icon
    class="cursor-pointer"
    name="event"
  >
    <q-popup-proxy
      ref="qDateProxy"
      transition-hide="scale"
      transition-show="scale"
    >
      <q-date
        :mask="format"
        :value="value"
        @input="input"
      />
    </q-popup-proxy>
  </q-icon>
</template>

<script>
import AppDateMixinProps from 'src/app/Components/Date/MixinPropsDate'

export default {
  /**
   */
  name: 'DateWidgetDate',
  /**
   */
  mixins: [AppDateMixinProps],
  /**
   */
  methods: {
    /**
     * @param value
     */
    input (value) {
      this.$refs.qDateProxy.hide()
      this.$emit('input', value)
    }
  }
}
</script>

<style scoped>

</style>

DateWidgetDatetime.vue

<template>
  <q-icon
    class="cursor-pointer"
    name="access_time"
  >
    <q-popup-proxy
      ref="qDatetimeProxy"
      transition-hide="scale"
      transition-show="scale"
      @before-show="datetimeBeforeShow"
    >
      <q-time
        :mask="format"
        :value="datetimeValue"
        @input="datetimeInput"
        format24h
      />
    </q-popup-proxy>
  </q-icon>
</template>

<script>
import AppDateMixinProps from 'src/app/Components/Date/MixinPropsDate'
import { now } from 'src/app/Util/date'

export default {
  /**
   */
  name: 'DateWidgetDatetime',
  /**
   */
  mixins: [AppDateMixinProps],
  /**
   */
  data: () => ({
    datetime: null
  }),
  /**
   */
  computed: {
    /**
     * @returns {string}
     */
    datetimeValue () {
      if (!this.value) {
        return this.datetime
      }
      return this.value
    }
  },
  /**
   */
  methods: {
    /**
     * @param value
     */
    datetimeInput (value) {
      this.$refs.qDatetimeProxy.hide()
      this.$emit('input', value)
    },
    /**
     */
    datetimeBeforeShow () {
      this.datetime = now()
    }
  }
}
</script>

<style scoped>

</style>

MixinBehaviour.js

import { dateFormatter } from 'src/app/Util/formatter'

/**
 * @typedef {AppDateMixin}
 */
export default {
  /**
   */
  computed: {
    /**
     * @returns {Object}
     */
    inputAttrs () {
      return { ...this.$attrs }
    },
    /**
     * @returns {string}
     */
    inputValue () {
      const value = dateFormatter(this.value, this.display, this.format)
      if (!value) {
        return ''
      }
      return value
    },
    /**
     * @returns {string}
     */
    widgetValue () {
      const value = dateFormatter(this.value, this.format, this.format)
      if (!value) {
        return ''
      }
      return value
    }
  },
  /**
   */
  methods: {
    /**
     * @param {string} value
     */
    inputUpdateValue (value) {
      const input = dateFormatter(value, this.format, this.display)
      if (input) {
        this.$emit('input', input)
        return
      }
      this.$emit('input', '')
    },
    /**
     * @param {string} value
     */
    widgetUpdateValue (value) {
      this.$emit('input', value)
    }
  }
}

MixinPropsDate.js

/**
 * @typedef {AppDateMixinProps}
 */
export default {
  /**
   */
  props: {
    value: {
      type: String,
      default: ''
    },
    mask: {
      type: String,
      default: '##/##/####'
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    display: {
      type: String,
      default: 'DD/MM/YYYY'
    }
  }
}

MixinPropsDatetime.js

/**
 * @typedef {AppDateMixinProps}
 */
export default {
  /**
   */
  props: {
    value: {
      type: String,
      default: ''
    },
    mask: {
      type: String,
      default: '##/##/#### ##:##'
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD HH:mm'
    },
    display: {
      type: String,
      default: 'DD/MM/YYYY HH:mm'
    }
  }
}