- Added CDateTime component (to save in the db)... in the component CGridTableRec and for CEventsCalendar

src/components/CDateTime/CDateTime.scss

@@ -0,0 +1,6 @@
+.calendar_comp{
+  max-width: 170px;
+  @media (max-width: 400px) {
+    max-width: 400px;
+  }
+}

src/components/CDateTime/CDateTime.ts

@@ -0,0 +1,79 @@
+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'
+import { CalendarStore } from '../../store/Modules'
+
+@Component({
+  name: 'CDateTime'
+})
+
+export default class CDateTime extends Vue {
+  public $q
+  public $t
+  @Prop() public value!: 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 bgcolor!: string
+  @Prop({ required: false, default: false }) public dense: boolean
+
+  public mystyleicon: string = 'font-size: 1.5rem;'
+  public showDateTimeScroller: boolean = false
+  public saveit: boolean = false
+  public myvalue: Date = new Date()
+  public valueprec: Date = new Date()
+
+  get getclass() {
+    return 'calendar_comp ' + this.data_class
+  }
+
+  @Watch('showDateTimeScroller')
+  public Opening() {
+    if (this.showDateTimeScroller) {
+      this.saveit = false
+      this.valueprec = this.myvalue
+      this.$emit('show')
+    } else {
+      if (!this.saveit)
+        this.myvalue = this.valueprec
+    }
+  }
+
+  public savetoclose() {
+    this.saveit = true
+    this.showDateTimeScroller = false
+    this.$emit('savetoclose', this.myvalue, this.valueprec)
+  }
+
+  get scrollerPopupStyle280() {
+    if (this.$q.screen.lt.sm) {
+      return {
+        width: '100vw',
+        height: '100vh'
+      }
+    } else {
+      return {
+        maxHeight: '400px',
+        height: '400px',
+        width: '280px'
+      }
+    }
+  }
+
+  get locale() {
+    return CalendarStore.state.locale
+  }
+
+  public mounted() {
+    this.myvalue = this.value
+  }
+
+  public changeval(newval) {
+    console.log('changeval', newval)
+    this.$emit('update:value', newval)
+  }
+}

src/components/CDateTime/CDateTime.vue

@@ -0,0 +1,46 @@
+<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">
+
+        <template #append>
+            <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy v-model="showDateTimeScroller">
+
+                    <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-input>
+</template>
+
+<script lang="ts" src="./CDateTime.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CDateTime.scss';
+</style>

src/components/CDateTime/index.ts

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