other components...

src/components/CDate/CDate.scss

@@ -0,0 +1,33 @@
+$heightBtn: 100%;
+
+.progress-item {
+  margin: 1px;
+  padding: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  flex: 1;
+  flex-direction: column;
+  order: 1;
+}
+
+.cpr-progrbar-item {
+  //height: 10px
+  padding-top: 7px;
+  height:15px;
+}
+
+.cpr-percProgress {
+  padding-top: 3px;
+  color: #888;
+  vertical-align: middle;
+  text-align: center;
+  //line-height: $heightitem;
+}
+
+.data_string {
+  font-size: 0.85rem;
+  @media (max-width: 600px) {
+    max-width: 22px;
+    // display: none;
+  }
+}

src/components/CDate/CDate.ts

@@ -0,0 +1,67 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { date } from 'quasar'
+
+@Component({
+  name: 'CDate'
+})
+
+export default class CDate extends Vue {
+  @Prop() public mydate!: Date
+  @Prop({ required: false, default: '' }) public label: string
+  @Prop({ required: false, default: '' }) public data_class!: string
+  @Prop({ required: false, default: false }) public readonly!: boolean
+  @Prop({ required: false, default: false }) public disable!: boolean
+  @Prop({ required: false, default: '' }) public color!: string
+  @Prop({ required: false, default: false }) public rounded!: boolean
+  @Prop({ required: false, default: false }) public outlined!: boolean
+  @Prop({ required: false, default: true }) public dense!: boolean
+
+  public mystyleicon: string = 'font-size: 1.5rem;'
+
+  @Watch('mydate')
+  public valchanged(value) {
+    this.valueInternal = value
+  }
+
+  public $refs: {
+    datePicker
+  }
+  private valueInternal: Date = tools.getDateNull()
+
+  public created() {
+    this.valueInternal = this.mydate
+
+    if (this.data_class !== '') {
+      this.mystyleicon = 'font-size: 1rem;'
+    }
+  }
+
+  public changedate(value) {
+    const datavalida = tools.convertstrtoDate(value)
+    if (!!datavalida) {
+      this.valueInternal = datavalida
+      console.log('EMIT: changedate', datavalida.toString())
+      this.$emit('input', this.getDate())
+    } else {
+      console.log('   DATA NON VALIDAAAAAAAAAAAAA ', value, datavalida)
+    }
+    this.$refs.datePicker.hide()
+  }
+
+  get getdatestring() {
+    const mydate = tools.getstrDate(this.valueInternal)
+    console.log('getdatestring', mydate)
+    return mydate
+  }
+  get getdateyymmddstring() {
+    return tools.getstrYYMMDDDate(this.valueInternal)
+  }
+  private getDate() {
+    return this.valueInternal
+  }
+
+}

src/components/CDate/CDate.vue

@@ -0,0 +1,22 @@
+<template>
+  <q-input :class="data_class" :bg-color="color" :readonly="readonly" :disable="disable" debounce="1000" :dense="dense"
+           :value="getdatestring" stack-label :label="label" @input="changedate" :rounded="rounded"
+           mask="##/##/####"
+           fill-mask
+           :outlined="outlined">
+    <template v-slot:append>
+      <q-icon name="event" class="cursor-pointer" :style="mystyleicon">
+        <q-popup-proxy v-if="!readonly" ref="datePicker">
+          <q-date :value="getdateyymmddstring" today-btn @input="changedate"></q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script lang="ts" src="./CDate.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CDate.scss';
+</style>

src/components/CDate/index.ts

@@ -0,0 +1 @@
+export {default as CDate} from './CDate.vue'