Prace na sprave letu

src/components/inputs/DatetimePicker.vue

@@ -1,24 +1,73 @@
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 
 const props = defineProps({
   modelValue: {
-    type: String,
-    required: true
+    type: Date,
+  },
+  dateMask: {
+    type: String, Boolean,
+    required: false,
+    default: "YYYY-MM-DD"
+  },
+  timeMask: {
+    type: String, Boolean,
+    required: false,
+    default: "HH:mm"
   }
 })
-const emit = defineEmits(['update:modelValue']);
 
-let model = ref("");
+let dateModel = ref("");
+let timeModel = ref("");
 onMounted(() => {
-  model.value = props.modelValue;
+  let date = "";
+  let time = "";
+
+  if (props.modelValue) {
+
+    date = props.dateMask.replace("YYYY", props.modelValue.getFullYear())
+      .replace("MM", ('0' + props.modelValue.getMonth()).slice(-2))
+      .replace("DD", ('0' + props.modelValue.getDate()).slice(-2));
+
+    time = props.timeMask.replace("HH", ('0' + props.modelValue.getHours()).slice(-2))
+      .replace("mm", ('0' + props.modelValue.getMinutes()).slice(-2))
+  }
+
+  if (time === '') {
+    time = "00:00";
+  }
+
+  dateModel.value = date;
+  timeModel.value = time;
 });
 
-watch(model, (newVal) => {
-  emit("update:modelValue", newVal);
-})
+const model = computed(() => dateModel.value + " " + timeModel.value);
+
+const emit = defineEmits(['update:modelValue']);
+const emitModelUpdate = () => {
+  const now = new Date();
+  const val = new Date(model.value);
+  val.setHours(val.getHours() + now.getTimezoneOffset());
+  emit("update:modelValue", val);
+}
+watch([dateModel, timeModel], emitModelUpdate)
 </script>
 
 <template>
-          <q-input type="datetime-local" v-model="model" v-bind="$attrs"/>
+  <q-input v-model="model" readonly>
+    <template #append>
+      <q-icon name="event">
+        <q-popup-proxy cover>
+          <div class="row">
+            <div class="col" v-if="dateMask">
+              <q-date v-model="dateModel" :mask="dateMask"/>
+            </div>
+            <div class="col" v-if="timeMask">
+              <q-time v-model="timeModel" format24h :mask="timeMask"/>
+            </div>
+          </div>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
 </template>