other components...

src/components/CDateTime/CDateTime.scss

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

src/components/CDateTime/CDateTime.ts

@@ -0,0 +1,130 @@
+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'
+import MixinBase from '../../mixins/mixin-base'
+
+@Component({
+  name: 'CDateTime',
+  mixins: [MixinBase]
+})
+
+export default class CDateTime extends Vue {
+  public $q
+  public $t
+  @Prop({ required: false, default: null }) public value: Date
+  @Prop({ required: false, default: null }) public valueDate: Date
+  @Prop({ required: true, default: 'Val:' }) public label: string
+  @Prop({ required: false, default: '' }) public data_class!: string
+  @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
+  @Prop({ required: false, default: '5' }) public minuteinterval: boolean
+  @Prop({ required: false, default: 'date-time' }) public view: string
+
+  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() {
+    // console.log('Opening', 'myvalue', this.myvalue, 'value', this.value)
+    this.saveit = false
+    this.valueprec = this.myvalue
+    if (this.myvalue === undefined) {
+      this.valueDate = new Date()
+      this.myvalue = tools.getstrYYMMDDDateTime(this.valueDate)
+    }
+    // console.log('Opening', this.valueDate, this.myvalue)
+    this.$emit('show')
+  }
+
+  public Closing() {
+    // console.log('Closing')
+    if (!this.saveit) {
+      if (this.myvalue !== this.valueprec) {
+        this.myvalue = this.valueprec
+        tools.showNeutralNotif(this.$q, this.$t('db.reccanceled'))
+      }
+    }
+  }
+
+  @Watch('valueDate')
+  public changevalueDate() {
+    if (this.valueDate)
+      this.myvalue = tools.getstrYYMMDDDateTime(this.valueDate)
+
+    // console.log('changevalueDate myvalue', this.myvalue)
+  }
+  @Watch('value')
+  public changevalue() {
+    this.myvalue = this.value
+    // console.log('changevalue myvalue', this.myvalue)
+  }
+
+  public savetoclose() {
+    // console.log('Close')
+    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 created() {
+    if (this.value !== null)
+      this.myvalue = this.value
+    else
+      this.myvalue = tools.getstrYYMMDDDateTime(this.valueDate)
+
+    // console.log('created myvalue', this.myvalue)
+  }
+
+  public changeval(newval) {
+    // console.log('changeval', newval, 'value=', this.value, 'myvalue=', this.myvalue)
+    this.$emit('update:value', newval)
+  }
+
+  public mystyle() {
+    if (this.label !== '')
+      return ''
+    else
+      return ''
+  }
+
+  public getstrDate(mydate) {
+    if (this.view === 'date-time') {
+      return tools.getstrDateTime(mydate)
+    } else {
+      return tools.getstrDate(mydate)
+    }
+  }
+}

src/components/CDateTime/CDateTime.vue

@@ -0,0 +1,71 @@
+<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"
+                 @input="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-icon v-if="canEdit" name="event" class="cursor-pointer">
+                    <q-popup-proxy v-model="showDateTimeScroller" @before-show="Opening" @before-hide="Closing">
+
+                        <q-scroller
+                                v-model="myvalue"
+                                :view="view"
+                                :locale="toolsext.getLocale()"
+                                :rounded-borders="true"
+                                border-color="#2196f3"
+                                bar-color="#2196f3"
+                                text-color="white"
+                                color="primary"
+                                :minute-interval="minuteinterval"
+                                inner-text-color="primary"
+                                inner-color="white"
+                                :style="scrollerPopupStyle280"
+                                @input="changeval"
+                                @close="() => { savetoclose();  }"
+                        ></q-scroller>
+
+                    </q-popup-proxy>
+                </q-icon>
+            </template>
+        </q-field>
+    </div>
+</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'