sfp_front_vue_diarista_cliente/src/components/defaults/DefaultInputDatePicker.vue

<template>
  <div v-bind="$attrs">
    <q-input
      ref="inputRef"
      v-model="treatedDate"
      :mask="inputMask"
      :label
      :rules
      :dense
      :error
      :error-message
      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="primary" class="bg-surface text-text calendar-custom">
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="Close" color="primary" 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"
                    @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 />
                </q-tab-panel>
              </q-tab-panels>
            </template>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

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

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

const qInputRef = useTemplateRef("inputRef");

const treatedDate = defineModel();
const untreatedDate = defineModel("untreatedDate");

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 (!qInputRef.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>

<style scoped lang="scss">

.calendar-custom {
  border-radius: 20px;
  background-color: white !important;

  :deep(.q-date__main) {
    background-color: white !important;
  }

  :deep(.q-date__content) {
    background-color: white !important;
  }

  :deep(.q-date__calendar) {
    background-color: white !important;
  }

  :deep(.q-date__calendar-item--out) {
    .q-btn__content {
      color: #CBD5E1 !important;
    }
  }

  :deep(.q-date__calendar-days .q-btn__content) {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #1E293B;
  }

  :deep(.q-date__calendar-weekdays > div) {
    color: #6366F1;
    font-weight: 700;
    opacity: 0.8;
  }

  :deep(.q-date__navigation) {
    .q-btn {
      color: #1E293B !important;
    }
    .q-btn__content {
      color: #1E293B !important;
    }
  }

  :deep(.q-date__nav-btn-month),
  :deep(.q-date__nav-btn-year) {
    color: #6366F1 !important;
    font-weight: 700;
  }

  :deep(.q-date__event) {
    bottom: 4px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
  }

  :deep(.q-date__today) {
    .q-btn__content {
      color: #7c4dff !important;
      background: #7c4dff15;
      border-radius: 50%;
    }
  }

  :deep(.q-date__selected) {
    .q-btn__content {
      background: #6366F1 !important;
      color: white !important;
      border-radius: 50%;
      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
    }
  }

  :deep(.q-date__view--months),
  :deep(.q-date__view--years) {
    .q-btn {
      color: #1E293B !important;
    }
  }
}
</style>