114 lines
2.8 KiB
Vue
114 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import VueDatePicker from '@vuepic/vue-datepicker';
|
|
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const i18n = useI18n();
|
|
const model = defineModel<string | Date | null>();
|
|
|
|
const props = defineProps<{
|
|
id?: string;
|
|
readonly?: boolean;
|
|
clearable?: boolean;
|
|
label?: string;
|
|
bgColor?: string;
|
|
rules?: ((value: string) => string | true)[];
|
|
disabledDates?: string[] | Date[] | ((date: Date) => boolean);
|
|
}>();
|
|
|
|
function valueUpdate(value: string) {
|
|
if (props.readonly) return;
|
|
|
|
if (model.value && !(model.value instanceof Date)) {
|
|
model.value = new Date(model.value);
|
|
}
|
|
|
|
if (value.length === 10) {
|
|
const _date = parseAndFormatDate(value, i18n.locale.value);
|
|
|
|
if (_date) {
|
|
if (Array.isArray(props.disabledDates)) {
|
|
const disabled = props.disabledDates.map((v) =>
|
|
new Date(v).toISOString(),
|
|
);
|
|
if (disabled.includes(_date.toISOString())) {
|
|
model.value = null;
|
|
}
|
|
}
|
|
if (typeof props.disabledDates === 'function') {
|
|
if (props.disabledDates(_date)) {
|
|
model.value = null;
|
|
}
|
|
}
|
|
|
|
if (model.value instanceof Date && !isNaN(model.value.getTime())) {
|
|
model.value.setDate(_date.getDate());
|
|
model.value.setMonth(_date.getMonth());
|
|
model.value.setFullYear(_date.getFullYear());
|
|
} else {
|
|
model.value = _date;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VueDatePicker
|
|
utc
|
|
auto-apply
|
|
:id
|
|
:for="id"
|
|
:disabled="readonly"
|
|
:disabled-dates="disabledDates"
|
|
:teleport="true"
|
|
:dark="$q.dark.isActive"
|
|
:locale="$i18n.locale === 'tha' ? 'th' : 'en'"
|
|
:enableTimePicker="false"
|
|
v-model="model"
|
|
class="col-2"
|
|
>
|
|
<template #trigger>
|
|
<q-input
|
|
placeholder="DD/MM/YYYY"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
:bg-color="bgColor"
|
|
:rules
|
|
:label
|
|
:for="id"
|
|
:readonly="readonly"
|
|
:mask="readonly ? '' : '##/##/####'"
|
|
:model-value="
|
|
model
|
|
? readonly
|
|
? dateFormat(model)
|
|
: dateFormat(model, false, false, true)
|
|
: readonly
|
|
? '-'
|
|
: undefined
|
|
"
|
|
@update:model-value="valueUpdate"
|
|
>
|
|
<template #prepend>
|
|
<q-icon
|
|
size="xs"
|
|
name="mdi-calendar-blank-outline"
|
|
class="cursor-pointer"
|
|
color="primary"
|
|
/>
|
|
</template>
|
|
<template v-if="clearable" v-slot:append>
|
|
<q-icon
|
|
v-if="model && !readonly"
|
|
name="mdi-close-circle"
|
|
class="cursor-pointer app-text-muted"
|
|
size="sm"
|
|
@click.stop="model = undefined"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</VueDatePicker>
|
|
</template>
|