Combobox, POI

src/components/inputs/DatetimePicker.vue

@@ -1,31 +1,25 @@
 <script setup>
-import {computed, onMounted, ref, watch} from "vue";
-import {parseDate} from "src/composables/datetimeUtils";
+import {computed, onMounted, ref} from "vue";
+import {FORMAT_DATETIME_LONG, FORMAT_ISO, formatDatetime, parseDate} from "src/composables/datetimeUtils";
 
 const props = defineProps({
   modelValue: {
     type: [String, Date]
   },
-  dateMask: {
+  mask: {
     type: [String, Boolean],
     required: false,
-    default: "YYYY-MM-DD"
-  },
-  timeMask: {
-    type: [String, Boolean],
-    required: false,
-    default: "HH:mm"
+    default: FORMAT_DATETIME_LONG
   }
+
 })
 
 let dateModel = ref("");
 let timeModel = ref("");
 
+let originalTime, originalDate;
 onMounted(() => {
-  let date = "";
-  let time = "";
   let emitDefaultValue = false;
-
   if (props.modelValue) {
     let modelVal = props.modelValue;
     if (typeof modelVal === 'string') {
@@ -33,56 +27,113 @@ onMounted(() => {
       emitDefaultValue = true;
     }
 
-    date = props.dateMask
-      .replace("YYYY", modelVal.getFullYear().toString())
-      .replace("MM", ('0' + modelVal.getMonth()).slice(-2))
-      .replace("DD", ('0' + modelVal.getDate()).slice(-2));
-
-    time = props.timeMask
-      .replace("HH", ('0' + modelVal.getHours()).slice(-2))
-      .replace("mm", ('0' + modelVal.getMinutes()).slice(-2))
-      .replace("ss", ('0' + modelVal.getSeconds()).slice(-2))
-
-    // if (time === '') {
-    //   time = "00:00";
-    // }
+    dateModel.value = formatDatetime(modelVal, "YYYY-MM-DD");
+    timeModel.value = formatDatetime(modelVal, "HH:mm:ss");
   }
 
-  dateModel.value = date;
-  timeModel.value = time;
-
+  setOriginalValues();
   if (emitDefaultValue) {
     emitModelUpdate();
   }
 });
 
 
-const model = computed(() => dateModel.value + " " + timeModel.value);
+const publicModel = computed(() => {
+  if (!dateModel.value) {
+    return "";
+  }
+  const dateObject = parseDate(model.value, FORMAT_ISO);
+  return formatDatetime(dateObject, props.mask);
+});
+
+const popupProxy = ref(null);
+
+const model = computed(() => dateModel.value + "T" + timeModel.value);
 const emit = defineEmits(['update:modelValue']);
 const emitModelUpdate = () => {
-  const now = new Date();
   const val = parseDate(model.value);
-  // val.setHours(val.getHours() + now.getTimezoneOffset());
   emit("update:modelValue", val);
+  popupProxy.value.hide();
 }
-watch([dateModel, timeModel], emitModelUpdate)
+
+const containsAnyOf = (needles, haystack) => {
+  for (const i in needles) {
+    if (haystack.includes(needles[i])) return true;
+  }
+
+  return false;
+}
+
+const showDatePicker = computed(() => containsAnyOf(["YY", "M", "D"], props.mask));
+const showTimePicker = computed(() => containsAnyOf(["H", "h", "m"], props.mask));
+
+const setOriginalValues = () => {
+  originalDate = dateModel.value;
+  originalTime = timeModel.value;
+}
+
+const cancelSelection = () => {
+  dateModel.value = originalDate;
+  timeModel.value = originalTime;
+  popupProxy.value.hide();
+}
+
+const myLocale = {
+  /* starting with Sunday */
+  days: ["Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota", "Neděle"],
+  daysShort: ["Po", "Út", "St", "Čt", "Pá", "So", "Ne"],
+  months: [
+    "Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad",
+    "Prosinec"
+  ],
+  monthsShort: ["led.", "úno.", "bře.", "dub.", "kvě.", "čvn.", "čvc.", "srp.", "zář.", "říj.", "lis.", "pro."],
+  firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+  format24h: true,
+  pluralDay: 'dny'
+}
+
+// https://quasar.dev/vue-composables/use-form-child - mozna resi ohack s onMounted()?
+
 </script>
 
 <template>
-  <q-input v-model="model" readonly>
+  <q-input readonly v-model="publicModel">
     <template #append>
-      <q-icon name="event">
-        <q-popup-proxy cover>
+      <q-icon name="event"/>
+    </template>
+
+    <template #default>
+      <q-popup-proxy ref="popupProxy" @hide="emitModelUpdate" @show="setOriginalValues">
+        <div class="proxy-wrapper">
           <div class="row">
-            <div class="col" v-if="dateMask">
-              <q-date v-model="dateModel" :mask="dateMask"/>
+            <div class="col-12 col-sm-6" v-if="showDatePicker">
+              <q-date square v-model="dateModel" :today-btn="true" flat mask="YYYY-MM-DD" :locale="myLocale"/>
             </div>
-            <div class="col" v-if="timeMask">
-              <q-time v-model="timeModel" format24h :mask="timeMask"/>
+            <div class="col-12 col-sm-6" v-if="showTimePicker">
+              <q-time square v-model="timeModel" format24h flat mask="HH:mm"/>
             </div>
           </div>
-        </q-popup-proxy>
-      </q-icon>
+          <div class="row q-mb-sm">
+            <div class="col">
+              <q-btn color="secondary" class="q-ml-sm" @click="cancelSelection">Zrušit</q-btn>
+            </div>
+            <div class="col text-right">
+              <q-btn color="primary" class="q-mr-sm" @click="emitModelUpdate">Nastavit</q-btn>
+            </div>
+          </div>
+        </div>
+      </q-popup-proxy>
     </template>
   </q-input>
 </template>
+
+
+<style scoped>
+.proxy-wrapper {
+  background: white;
+}
+
+.q-date, .q-time {
+  width: 100%;
+}
+</style>