refactor(02): use share DatePicker
This commit is contained in:
puriphatt
parent
8ee67bbca5
commit
e6b63a8476
2 changed files with 28 additions and 183 deletions
|
|
@ -8,6 +8,7 @@ import { onMounted, ref, watch } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { Icon } from '@iconify/vue';
|
import { Icon } from '@iconify/vue';
|
||||||
import { QSelect } from 'quasar';
|
import { QSelect } from 'quasar';
|
||||||
|
import DatePicker from '../shared/DatePicker.vue';
|
||||||
|
|
||||||
const { locale } = useI18n();
|
const { locale } = useI18n();
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
@ -158,132 +159,24 @@ watch(
|
||||||
"
|
"
|
||||||
@clear="registrationNo = ''"
|
@clear="registrationNo = ''"
|
||||||
/>
|
/>
|
||||||
<VueDatePicker
|
<DatePicker
|
||||||
id="input-startDate"
|
class="col-6"
|
||||||
utc
|
id="input-start-date"
|
||||||
autoApply
|
:readonly="readonly"
|
||||||
:dark="$q.dark.isActive"
|
:label="$t('formDialogInputStartDate')"
|
||||||
v-model="startDate"
|
v-model="startDate"
|
||||||
:teleport="true"
|
clearable
|
||||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
/>
|
||||||
:enableTimePicker="false"
|
|
||||||
:disabled="readonly"
|
|
||||||
class="col-6"
|
|
||||||
>
|
|
||||||
<template #year="{ value }">
|
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
||||||
</template>
|
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
for="input-start-date"
|
|
||||||
:label="$t('formDialogInputStartDate')"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
placeholder="DD/MM/YYYY"
|
|
||||||
:mask="readonly ? '' : '##/##/####'"
|
|
||||||
:model-value="
|
|
||||||
startDate
|
|
||||||
? readonly
|
|
||||||
? dateFormat(startDate)
|
|
||||||
: dateFormat(startDate, false, false, true)
|
|
||||||
: '-'
|
|
||||||
"
|
|
||||||
@update:model-value="
|
|
||||||
(v) => {
|
|
||||||
if (v && v.toString().length === 10) {
|
|
||||||
startDate = parseAndFormatDate(v, locale);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
size="xs"
|
|
||||||
name="mdi-calendar-blank-outline"
|
|
||||||
class="cursor-pointer"
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
v-if="startDate && !readonly"
|
|
||||||
name="mdi-close-circle"
|
|
||||||
class="cursor-pointer app-text-muted"
|
|
||||||
size="sm"
|
|
||||||
@click.stop="startDate = undefined"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</VueDatePicker>
|
|
||||||
|
|
||||||
<VueDatePicker
|
<DatePicker
|
||||||
utc
|
|
||||||
autoApply
|
|
||||||
v-model="retireDate"
|
|
||||||
:dark="$q.dark.isActive"
|
|
||||||
:teleport="true"
|
|
||||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
|
||||||
:enableTimePicker="false"
|
|
||||||
:disabled="readonly"
|
|
||||||
class="col-6"
|
class="col-6"
|
||||||
>
|
id="input-retire-date"
|
||||||
<template #year="{ value }">
|
:readonly="readonly"
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
:label="$t('formDialogInputRetireDate')"
|
||||||
</template>
|
v-model="retireDate"
|
||||||
<template #year-overlay-value="{ value }">
|
clearable
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
/>
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
for="input-retire-date"
|
|
||||||
:label="$t('formDialogInputRetireDate')"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
placeholder="DD/MM/YYYY"
|
|
||||||
:mask="readonly ? '' : '##/##/####'"
|
|
||||||
:model-value="
|
|
||||||
retireDate
|
|
||||||
? readonly
|
|
||||||
? dateFormat(retireDate)
|
|
||||||
: dateFormat(retireDate, false, false, true)
|
|
||||||
: '-'
|
|
||||||
"
|
|
||||||
@update:model-value="
|
|
||||||
(v) => {
|
|
||||||
if (v && v.toString().length === 10) {
|
|
||||||
retireDate = parseAndFormatDate(v, locale);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
size="xs"
|
|
||||||
name="mdi-calendar-blank-outline"
|
|
||||||
class="cursor-pointer"
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
v-if="retireDate && !readonly"
|
|
||||||
name="mdi-close-circle"
|
|
||||||
class="cursor-pointer app-text-muted"
|
|
||||||
size="sm"
|
|
||||||
@click.stop="retireDate = undefined"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</VueDatePicker>
|
|
||||||
<q-select
|
<q-select
|
||||||
v-if="userType === 'MESSENGER'"
|
v-if="userType === 'MESSENGER'"
|
||||||
outlined
|
outlined
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import {
|
||||||
import { ref, onMounted, watch } from 'vue';
|
import { ref, onMounted, watch } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { capitalize } from 'vue';
|
import { capitalize } from 'vue';
|
||||||
|
import DatePicker from '../shared/DatePicker.vue';
|
||||||
|
|
||||||
const { locale } = useI18n();
|
const { locale } = useI18n();
|
||||||
const optionStore = useOptionStore();
|
const optionStore = useOptionStore();
|
||||||
|
|
@ -325,68 +326,19 @@ watch(
|
||||||
</template>
|
</template>
|
||||||
</q-select>
|
</q-select>
|
||||||
|
|
||||||
<VueDatePicker
|
<DatePicker
|
||||||
:id="`${prefixId}-input-birth-date`"
|
|
||||||
:for="`${prefixId}-input-birth-date`"
|
|
||||||
utc
|
|
||||||
autoApply
|
|
||||||
v-model="birthDate"
|
v-model="birthDate"
|
||||||
:disabled-dates="disabledAfterToday"
|
|
||||||
:teleport="true"
|
|
||||||
:dark="$q.dark.isActive"
|
|
||||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
|
||||||
:enableTimePicker="false"
|
|
||||||
:disabled="readonly"
|
|
||||||
class="col-2"
|
class="col-2"
|
||||||
>
|
:id="`${prefixId}-input-birth-date`"
|
||||||
<template #year="{ value }">
|
:readonly="readonly"
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
:label="$t('formDialogInputBirthDate')"
|
||||||
</template>
|
:disabled-dates="disabledAfterToday"
|
||||||
<template #year-overlay-value="{ value }">
|
:rules="[
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
(val: string) =>
|
||||||
</template>
|
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
|
||||||
<template #trigger>
|
]"
|
||||||
<q-input
|
/>
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-birth-date`"
|
|
||||||
hide-bottom-space
|
|
||||||
placeholder="DD/MM/YYYY"
|
|
||||||
:label="$t('formDialogInputBirthDate')"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
:rules="[
|
|
||||||
(val: string) =>
|
|
||||||
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
|
|
||||||
]"
|
|
||||||
:mask="readonly ? '' : '##/##/####'"
|
|
||||||
:model-value="
|
|
||||||
birthDate && readonly
|
|
||||||
? dateFormat(birthDate)
|
|
||||||
: dateFormat(birthDate, false, false, true)
|
|
||||||
"
|
|
||||||
@update:model-value="
|
|
||||||
(v) => {
|
|
||||||
if (v && v.toString().length === 10) {
|
|
||||||
const today = new Date();
|
|
||||||
const date = parseAndFormatDate(v, locale);
|
|
||||||
birthDate = date && date > today ? today : date;
|
|
||||||
console.log(today);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
size="xs"
|
|
||||||
name="mdi-calendar-blank-outline"
|
|
||||||
class="cursor-pointer"
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</VueDatePicker>
|
|
||||||
<q-input
|
<q-input
|
||||||
lazy-rules="ondemand"
|
lazy-rules="ondemand"
|
||||||
:for="`${prefixId}-input-age`"
|
:for="`${prefixId}-input-age`"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue