sfp_front_vue_serprati_associado_app/src/components/defaults/DefaultInputDatePicker.vue

<template>
  <DefaultInput
    v-model="treatedDate"
    v-model:error="error"
    v-bind="$attrs"
    :input-ref="inputRef"
    :label="label"
    :mask="inputMask"
    clearable
  >
    <template #append>
      <q-icon
        :name="time ? 'mdi-calendar-clock' : 'mdi-calendar'"
        class="cursor-pointer"
      >
        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
          <template v-if="!time">
            <q-date v-model="date" mask="YYYY-MM-DD" color="violet-normal" :options="dateOptions">
              <div class="row items-center justify-end">
                <q-btn v-close-popup label="OK" color="violet-normal" flat />
              </div>
            </q-date>
          </template>

          <template v-else>
            <q-tab-panels
              v-model="activePanel"
              animated
              transition-prev="slide-right"
              transition-next="slide-left"
              class="bg-white"
            >
              <q-tab-panel name="date" class="q-pa-none">
                <q-date
                  v-model="date"
                  mask="YYYY-MM-DD HH:mm"
                  color="violet-normal"
                  :options="dateOptions"
                  @update:model-value="handleDateSelection"
                />
              </q-tab-panel>

              <q-tab-panel name="time" class="q-pa-none">
                <q-time v-model="date" mask="YYYY-MM-DD HH:mm" format24h color="violet-normal" />
              </q-tab-panel>
            </q-tab-panels>
          </template>
        </q-popup-proxy>
      </q-icon>
    </template>
  </DefaultInput>
</template>

<script setup>
import { watch, ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import masks from "src/helpers/masks";

import DefaultInput from "./DefaultInput.vue";

const { label, time, dateOptions } = defineProps({
  label: {
    type: String,
    default: () => useI18n().t("common.terms.date"),
  },
  time: {
    type: Boolean,
    default: false,
  },
  dateOptions: {
    type: [Array, Function],
    default: undefined,
  },
});

const treatedDate = defineModel({ type: [String, null] });
const untreatedDate = defineModel("untreatedDate", { type: [String, null] });
const error = defineModel("error", {
  type: [String, Object, Array, Boolean, null],
});

const inputRef = ref(null);
const activePanel = ref("date");
const date = ref();

const handleDateSelection = () => {
  if (time) {
    activePanel.value = "time";
  }
};

const formatDate = (value) => {
  if (!value) return null;

  const [datePart, timePart] = value.split(" ");
  const formattedDate = datePart.split("-").reverse().join("/");

  return time && timePart ? `${formattedDate} ${timePart}` : formattedDate;
};

const unformatDate = (value) => {
  if (!value) return null;

  const [datePart, timePart] = value.split(" ");
  const formattedDate = datePart.split("/").reverse().join("-");

  return time && timePart ? `${formattedDate} ${timePart}` : formattedDate;
};

const inputMask = computed(() => {
  // if (!inputRef.value) return "";

  if (time) {
    return masks.Brasil.datetime;
  }
  return masks.Brasil.date;
});

watch(date, (value) => {
  if (!value) return;

  untreatedDate.value = value;
  treatedDate.value = formatDate(value);
});

watch(treatedDate, (value) => {
  if (!value) {
    date.value = null;
    untreatedDate.value = null;
    treatedDate.value = null;
    activePanel.value = "date";
    return;
  }
  date.value = unformatDate(value);
});

watch(
  untreatedDate,
  (value) => {
    if (!value) {
      date.value = null;
      untreatedDate.value = null;
      treatedDate.value = null;
      activePanel.value = "date";
      return;
    }
    date.value = value;
    treatedDate.value = formatDate(value);
  },
  { immediate: true }
);
</script>