salvato.newfreeplanet/src/components/CDateTime/CDateTime.vue

<template>
  <div class="" :style="mystyle()">
    <q-input
      v-model="myvalue"
      v-show="false"
      color="blue-6"
      hide-bottom-space
      outlined
      borderless
      :label="label"
      :bg-color="bgcolor"
      :readonly="true"
      :dense="dense"
      mask="####-##-## ##:##"
      debounce="500"
      @update:model-value="changeval"
      :input-class="getclass()"
    >
    </q-input>

    <q-field
      :label="label"
      stack-label
      :value="myvalue"
      outlined
      :dense="dense"
      color="blue-6"
      :bg-color="bgcolor"
      debounce="500"
      :input-class="getclass()"
    >
      <template v-slot:control>
        <div style="">
          <div
            class="self-center full-width no-outline"
            :style="mystyle()"
            tabindex="0"
          >
            {{ getstrDate(myvalue) }}
          </div>
        </div>
      </template>
      <template v-slot:append>
        <q-btn
          dense
          color="primary"
          v-if="canEdit"
          icon="fas fa-calendar-day"
          class="cursor-pointer"
          @click="mydate = !mydate"
        >
        </q-btn>
        <q-btn
          dense
          color="primary"
          v-if="canEdit"
          icon="fas fa-clock"
          class="cursor-pointer"
          @click="mytime = !mytime"
        >
        </q-btn>
        <q-popup-proxy
          v-if="mydate"
          transition-show="flip-up"
          v-model="showDateTimeScroller"
          @before-show="Opening"
          @before-hide="Closing"
        >
          <q-card class="justify-center">
            <div class="q-gutter-md justify-center">
              <q-date
                v-model="myvalue"
                mask="YYYY-MM-DD HH:mm"
                color="purple"
                @update:model-value="changeval"
                @close="
                  () => {
                    savetoclose();
                  }
                "
              />
            </div>
            <q-card-actions align="center">
              <q-btn icon="fas fa-trash"
                @click="azzera"></q-btn>
              <div class="row justify-center">
                <q-btn
                  :label="$t('dialog.cancel')"
                  @click="replacevalue"
                ></q-btn>
                <q-btn
                  :label="'Imposta a ' + tools.getstrDateLong(myvalue)"
                  color="primary"
                  v-close-popup
                ></q-btn>
              </div>
            </q-card-actions>
          </q-card>
        </q-popup-proxy>
        <q-popup-proxy
          v-if="mytime"
          transition-show="flip-up"
          v-model="showDateTimeScroller"
          @before-show="Opening"
          @before-hide="Closing"
        >
          <q-card class="justify-center">
            <div class="q-gutter-md justify-center">
              <q-time
                v-model="myvalue"
                mask="YYYY-MM-DD HH:mm"
                color="purple"
                @update:model-value="changeval"
                @close="
                  () => {
                    savetoclose();
                  }
                "
              />
              <div class="row justify-center">
                <q-btn
                  :label="$t('dialog.cancel')"
                  @click="replacevalue"
                ></q-btn>
                <q-btn
                  :label="'Imposta a ' + tools.getstrTime(myvalue)"
                  color="primary"
                  v-close-popup
                ></q-btn>
              </div>
            </div>
          </q-card>
        </q-popup-proxy>
      </template>
    </q-field>
  </div>
</template>

<script lang="ts" src="./CDateTime.ts">
</script>

<style lang="scss" scoped>
@import './CDateTime.scss';
</style>