Fixed CDateTime component and CMyChipList

src/components/CDateTime/CDateTime.scss

@@ -4,3 +4,7 @@
     max-width: 400px;
   }
 }
+
+.calendar_comp  {
+  vertical-align: center;
+}

src/components/CDateTime/CDateTime.ts

@@ -5,18 +5,20 @@ import { toolsext } from '@src/store/Modules/toolsext'
 
 import { date } from 'quasar'
 import { CalendarStore } from '../../store/Modules'
+import MixinBase from '../../mixins/mixin-base'
 
 @Component({
-  name: 'CDateTime'
+  name: 'CDateTime',
+  mixins: [MixinBase]
 })
 
 export default class CDateTime extends Vue {
   public $q
   public $t
   @Prop() public value!: Date
-  @Prop({ required: false, default: '' }) public label: string
+  @Prop({ required: true, default: 'Val:' }) public label: string
   @Prop({ required: false, default: '' }) public data_class!: string
-  @Prop({ required: false, default: false }) public readonly!: boolean
+  @Prop({ required: false, default: true }) public canEdit!: boolean
   @Prop({ required: false, default: false }) public disable!: boolean
   @Prop({ required: false, default: '' }) public bgcolor!: string
   @Prop({ required: false, default: false }) public dense: boolean
@@ -74,10 +76,18 @@ export default class CDateTime extends Vue {
 
   public mounted() {
     this.myvalue = this.value
+    console.log('myvalue', this.myvalue)
   }
 
   public changeval(newval) {
     // console.log('changeval', newval)
     this.$emit('update:value', newval)
   }
+
+  public mystyle() {
+    if (this.label !== '')
+      return ''
+    else
+      return ''
+  }
 }

src/components/CDateTime/CDateTime.vue

@@ -1,41 +1,65 @@
 <template>
-    <q-input v-model="myvalue"
-             color="blue-6"
-             outlined
-             :label="label"
-             :bg-color="bgcolor"
-             :readonly="readonly"
-             :disable="disable"
-             :dense="dense"
-             mask="####-##-## ##:##"
-             debounce="500"
-             @input="changeval"
-             :class="getclass">
+    <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"
+                 :disable="disable"
+                 :dense="dense"
+                 mask="####-##-## ##:##"
+                 debounce="500"
+                 @input="changeval"
+                 :input-class="getclass"
+        >
+        </q-input>
 
-        <template #append>
-            <q-icon name="event" class="cursor-pointer">
-                <q-popup-proxy v-model="showDateTimeScroller">
+        <q-field
+                :label="label"
+                stack-label
+                :value="myvalue"
+                outlined
+                :dense="dense"
+                color="blue-6"
+                :bg-color="bgcolor"
+                debounce="500"
+                :input-class="getclass">
 
-                    <q-date-time-scroller
-                            v-model="myvalue"
-                            :locale="locale"
-                            :hour24-format="true"
-                            :rounded-borders="true"
-                            border-color="#2196f3"
-                            bar-color="#2196f3"
-                            color="white"
-                            background-color="primary"
-                            inner-color="primary"
-                            inner-background-color="white"
-                            :style="scrollerPopupStyle280"
-                            @input="changeval"
-                            @close="() => { savetoclose();  }"
-                    />
+            <template v-slot:control>
+                <div style="">
+                    <div class="self-center full-width no-outline" :style="mystyle" tabindex="0">
+                        {{ tools.getstrDateTime(myvalue) }}
+                    </div>
+                </div>
+            </template>
+            <template v-slot:append>
+                <q-icon v-if="canEdit" name="event" class="cursor-pointer">
+                    <q-popup-proxy v-model="showDateTimeScroller">
 
-                </q-popup-proxy>
-            </q-icon>
-        </template>
-    </q-input>
+                        <q-date-time-scroller
+                                v-model="myvalue"
+                                :locale="locale"
+                                :hour24-format="true"
+                                :rounded-borders="true"
+                                border-color="#2196f3"
+                                bar-color="#2196f3"
+                                color="white"
+                                background-color="primary"
+                                inner-color="primary"
+                                inner-background-color="white"
+                                :style="scrollerPopupStyle280"
+                                @input="changeval"
+                                @close="() => { savetoclose();  }"
+                        />
+
+                    </q-popup-proxy>
+                </q-icon>
+            </template>
+        </q-field>
+    </div>
 </template>
 
 <script lang="ts" src="./CDateTime.ts">