111 lines
3.2 KiB
Vue
111 lines
3.2 KiB
Vue
<script>
|
|
import { storeToRefs } from "pinia";
|
|
import { defineComponent, onBeforeMount, ref, watch } from "vue";
|
|
|
|
import { fullCurrentDate } from "src/constants/date";
|
|
import { invertDate } from "src/functions/invertDate";
|
|
import { useFormStore } from "src/stores/forms";
|
|
import IconCalendar from "../icons/IconCalendar.vue";
|
|
|
|
export default defineComponent({
|
|
name: "calendar-input",
|
|
components: { IconCalendar },
|
|
props: ["modelValue", "bindValue", "setValues", "dateCookies"],
|
|
setup({ setValues, dateCookies, modelValue }, { emit }) {
|
|
const formStore = useFormStore();
|
|
const { availability, postalCodeValid } = storeToRefs(formStore);
|
|
|
|
const [year, month, day] = fullCurrentDate.replaceAll("/", "-").split("-");
|
|
const currentDate = `${day}-${month}-${year}`;
|
|
const proxyDate = ref(invertDate(modelValue));
|
|
function updateProxy() {
|
|
proxyDate.value = invertDate(proxyDate.value);
|
|
}
|
|
|
|
function optionsValidDates(date) {
|
|
return date >= fullCurrentDate;
|
|
}
|
|
|
|
function updateModel(value) {
|
|
emit("update:modelValue", value);
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
setValues({ date: invertDate(proxyDate.value) });
|
|
});
|
|
|
|
watch(proxyDate, (newProxy) => {
|
|
setValues({ date: invertDate(newProxy) });
|
|
const btn = document.querySelector(".buttons-close-modal button")
|
|
if(btn) btn.click()
|
|
});
|
|
|
|
const LOCALE = {
|
|
days: "Domingo_Lunes_Martes_Miércoles_Jueves_Viernes_Sábado".split("_"),
|
|
daysShort: "Dom_Lun_Mar_Mié_Jue_Vie_Sáb".split("_"),
|
|
months:
|
|
"Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre".split(
|
|
"_"
|
|
),
|
|
monthsShort: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Sep_Oct_Nov_Dic".split("_"),
|
|
firstDayOfWeek: 1,
|
|
format24h: false,
|
|
pluralDay: "dias",
|
|
};
|
|
|
|
return {
|
|
availability,
|
|
postalCodeValid,
|
|
proxyDate,
|
|
LOCALE,
|
|
updateProxy,
|
|
optionsValidDates,
|
|
updateModel,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="custom-input-el calendar">
|
|
<q-btn round size="sm" class="custom-date-btn">
|
|
<IconCalendar />
|
|
|
|
<q-popup-proxy
|
|
cover
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<q-date
|
|
v-model="proxyDate"
|
|
:options="postalCodeValid.dataOptions"
|
|
:locale="LOCALE"
|
|
:readonly="!postalCodeValid.isValid"
|
|
mask="YYYY-MM-DD"
|
|
>
|
|
<div class="row items-center justify-end q-gutter-sm buttons-close-modal">
|
|
<q-btn label="Cancel" color="primary" flat v-close-popup />
|
|
<q-btn label="OK" color="primary" flat v-close-popup class="modal-close"/>
|
|
</div>
|
|
</q-date>
|
|
</q-popup-proxy>
|
|
</q-btn>
|
|
|
|
<div class="custom-block-content">
|
|
<p class="custom-head-paragraph">¿Cuándo?</p>
|
|
|
|
<q-input
|
|
:model-value="modelValue"
|
|
@update:model-value="updateModel"
|
|
v-bind="bindValue"
|
|
class="custom-date-input"
|
|
:error="false"
|
|
placeholder="Elige una fecha"
|
|
mask="##/##/####"
|
|
borderless
|
|
dense
|
|
:disable="!postalCodeValid.isValid"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template> |