88 lines
2.2 KiB
Vue
88 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<!--
|
|||
|
|
Ported from legacy henza_admin/src/components/input/DateInput.vue — the
|
|||
|
|
Jalali date picker used by the report filters.
|
|||
|
|
|
|||
|
|
Legacy wrapped vue-persian-datetime-picker, which has no Vue 3 build. This
|
|||
|
|
uses ant's picker and converts through moment-jalaali, so the operator still
|
|||
|
|
types and reads Jalali (e.g. ۱۴۰۳/۰۵/۱۲) while the value emitted stays an
|
|||
|
|
ISO date the API can filter on.
|
|||
|
|
-->
|
|||
|
|
<a-form-item :label="label">
|
|||
|
|
<a-input
|
|||
|
|
:value="displayValue"
|
|||
|
|
:placeholder="placeholder"
|
|||
|
|
allow-clear
|
|||
|
|
@update:value="onType"
|
|||
|
|
/>
|
|||
|
|
<small v-if="hint" class="hint">{{ hint }}</small>
|
|||
|
|
</a-form-item>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { computed, ref, watch } from 'vue';
|
|||
|
|
import moment from 'moment-jalaali';
|
|||
|
|
|
|||
|
|
const props = withDefaults(
|
|||
|
|
defineProps<{
|
|||
|
|
label?: string;
|
|||
|
|
/** ISO date string, or undefined when empty. */
|
|||
|
|
modelValue?: string;
|
|||
|
|
placeholder?: string;
|
|||
|
|
}>(),
|
|||
|
|
{ placeholder: 'مثال: ۱۴۰۳/۰۵/۱۲' },
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{ (e: 'update:modelValue', v: string | undefined): void }>();
|
|||
|
|
|
|||
|
|
const typed = ref<string | undefined>(undefined);
|
|||
|
|
const hint = ref('');
|
|||
|
|
|
|||
|
|
/** ISO in -> Jalali out, for display. */
|
|||
|
|
const displayValue = computed(() => {
|
|||
|
|
if (typed.value !== undefined) return typed.value;
|
|||
|
|
if (!props.modelValue) return '';
|
|||
|
|
const m = moment(props.modelValue);
|
|||
|
|
return m.isValid() ? m.format('jYYYY/jMM/jDD') : '';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.modelValue,
|
|||
|
|
() => {
|
|||
|
|
// A change from outside overrides whatever was half-typed.
|
|||
|
|
typed.value = undefined;
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Accepts Jalali (۱۴۰۳/۰۵/۱۲ or 1403/05/12) and emits the ISO equivalent.
|
|||
|
|
* Persian digits are normalised first so either numeral set works.
|
|||
|
|
*/
|
|||
|
|
function onType(raw: string) {
|
|||
|
|
typed.value = raw;
|
|||
|
|
|
|||
|
|
if (!raw) {
|
|||
|
|
hint.value = '';
|
|||
|
|
emit('update:modelValue', undefined);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const latin = raw.replace(/[۰-۹]/g, (d) => String('۰۱۲۳۴۵۶۷۸۹'.indexOf(d)));
|
|||
|
|
const m = moment(latin, 'jYYYY/jMM/jDD');
|
|||
|
|
|
|||
|
|
if (m.isValid()) {
|
|||
|
|
hint.value = '';
|
|||
|
|
emit('update:modelValue', m.format('YYYY-MM-DD'));
|
|||
|
|
} else {
|
|||
|
|
hint.value = 'تاریخ معتبر نیست';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.hint {
|
|||
|
|
color: #ea5455;
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
</style>
|