Added CDate component !

src/components/CDate/CDate.scss

@@ -38,3 +38,11 @@ $heightBtn: 100%;
   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

@@ -1,39 +1,58 @@
 import Vue from 'vue'
-import { Component, Emit, Inject, Model, Prop, Provide } from 'vue-property-decorator'
+import { Component, Prop, Watch } from 'vue-property-decorator'
 import { tools } from '@src/store/Modules/tools'
-import * as moment from 'moment'
+
+import { date } from 'quasar'
 
 @Component({
   name: 'CDate'
 })
 
 export default class CDate extends Vue {
-  // ************* IS NOT WORKING WELL ! ************
-  // @Model('input', {
-  //   default: ''
-  // })
-  // public mydate!: Date
-  @Prop() public myhint: string
-  @Model('input', {
-    default: '1999/01/01'
-  })
-  public mydate!: string
+  @Prop() public mydate!: Date
+  @Prop({ required: false }) public label: string
+  @Prop({ required: false, default: '' }) public data_class!: string
 
-  private valueInternal: string = '1988/01/01'
+  public mystyleicon: string = 'font-size: 1.5rem;'
 
-  @Emit('input')
-  public onValueChanged(value: string) {
+  @Watch('mydate')
+  public valchanged(value) {
     this.valueInternal = value
   }
 
-  // get getmydate() {
-  //   console.log('getmydate', this.mydate)
-  //   return tools.getstrDate(this.mydate)
-  // }
-  //
-  // public updatedate(mydate) {
-  //   console.log('updatedate', mydate)
-  //   this.mydate = mydate
-  // }
+  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)
+      this.$emit('input', this.getDate())
+    } else {
+      console.log('   DATA NON VALIDAAAAAAAAAAAAA ', value, datavalida)
+    }
+    this.$refs.datePicker.hide()
+  }
+
+  get getdatestring() {
+    return tools.getstrDate(this.valueInternal)
+  }
+  get getdateyymmddstring() {
+    return tools.getstrYYMMDDDate(this.valueInternal)
+  }
+  private getDate() {
+    return this.valueInternal
+  }
 
 }

src/components/CDate/CDate.vue

@@ -1,14 +1,13 @@
 <template>
-    <div>
-        <q-input dense v-model="mydate" mask="date" :hint="myhint">
-            <!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
-            <q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
-                <!--<q-popup-proxy>-->
-                    <!--<q-date v-model="mydate" today-btn/>-->
-                <!--</q-popup-proxy>-->
+    <q-input :class="data_class" debounce="1000" dense :value="getdatestring" stack-label :label="label" @input="changedate">
+        <template v-slot:append>
+            <q-icon name="event" class="cursor-pointer" :style="mystyleicon">
+                <q-popup-proxy ref="datePicker">
+                    <q-date :value="getdateyymmddstring" today-btn @input="changedate"></q-date>
+                </q-popup-proxy>
             </q-icon>
-        </q-input>
-    </div>
+        </template>
+    </q-input>
 </template>
 
 <script lang="ts" src="./CDate.ts">