fix: form date picker clear and icon

This commit is contained in:
puriphatt 2024-07-26 02:47:23 +00:00
parent dc89a60eb4
commit 54e3876019
6 changed files with 103 additions and 68 deletions

View file

@ -143,7 +143,7 @@ function deleteFile(name: string) {
name="mdi-close-circle" name="mdi-close-circle"
class="cursor-pointer app-text-muted" class="cursor-pointer app-text-muted"
size="sm" size="sm"
@click="startDate = undefined" @click.stop="startDate = undefined"
/> />
</template> </template>
</q-input> </q-input>
@ -205,7 +205,7 @@ function deleteFile(name: string) {
name="mdi-close-circle" name="mdi-close-circle"
class="cursor-pointer app-text-muted" class="cursor-pointer app-text-muted"
size="sm" size="sm"
@click="retireDate = undefined" @click.stop="retireDate = undefined"
/> />
</template> </template>
</q-input> </q-input>

View file

@ -206,7 +206,7 @@ const branchNo = defineModel<number>('branchNo');
? readonly ? readonly
? dateFormat(registerDate) ? dateFormat(registerDate)
: dateFormat(registerDate, false, false, true) : dateFormat(registerDate, false, false, true)
: '' : undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {

View file

@ -165,7 +165,7 @@ onMounted(async () => {
? readonly ? readonly
? dateFormat(payDate) ? dateFormat(payDate)
: dateFormat(payDate, false, false, true) : dateFormat(payDate, false, false, true)
: '' : undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {

View file

@ -268,9 +268,16 @@ onMounted(async () => {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
checkup.coverageStartDate && readonly checkup.coverageStartDate
? dateFormat(checkup.coverageStartDate) ? readonly
: dateFormat(checkup.coverageStartDate, false, false, true) ? dateFormat(checkup.coverageStartDate)
: dateFormat(
checkup.coverageStartDate,
false,
false,
true,
)
: undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -291,10 +298,10 @@ onMounted(async () => {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="checkup.coverageStartDate && !readonly" v-if="checkup.coverageStartDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="checkup.coverageStartDate = undefined" @click.stop="checkup.coverageStartDate = undefined"
/> />
</template> </template>
</q-input> </q-input>
@ -327,9 +334,16 @@ onMounted(async () => {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
checkup.coverageExpireDate && readonly checkup.coverageExpireDate
? dateFormat(checkup.coverageExpireDate) ? readonly
: dateFormat(checkup.coverageExpireDate, false, false, true) ? dateFormat(checkup.coverageExpireDate)
: dateFormat(
checkup.coverageExpireDate,
false,
false,
true,
)
: undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -353,10 +367,10 @@ onMounted(async () => {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="checkup.coverageExpireDate && !readonly" v-if="checkup.coverageExpireDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="checkup.coverageExpireDate = undefined" @click.stop="checkup.coverageExpireDate = undefined"
/> />
</template> </template>
</q-input> </q-input>

View file

@ -23,12 +23,14 @@ const addrOptions = reactive<{
const visaType = defineModel<string>('visaType'); const visaType = defineModel<string>('visaType');
const visaNumber = defineModel<string>('visaNumber'); const visaNumber = defineModel<string>('visaNumber');
const visaIssueDate = defineModel<Date | null>('visaIssueDate'); const visaIssueDate = defineModel<Date | null | string>('visaIssueDate');
const visaExpiryDate = defineModel<Date | null>('visaExpiryDate'); const visaExpiryDate = defineModel<Date | null | string>('visaExpiryDate');
const visaIssuingPlace = defineModel<string>('visaIssuingPlace'); const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
const visaStayUntilDate = defineModel<Date | null>('visaStayUntilDate'); const visaStayUntilDate = defineModel<Date | null | string>(
'visaStayUntilDate',
);
const tm6Number = defineModel<string>('tm6Number'); const tm6Number = defineModel<string>('tm6Number');
const entryDate = defineModel<Date | null>('entryDate'); const entryDate = defineModel<Date | null | string>('entryDate');
const visaTypeOption = const visaTypeOption =
defineModel<{ label: string; value: string }[]>('visaTypeOption'); defineModel<{ label: string; value: string }[]>('visaTypeOption');
@ -123,9 +125,11 @@ onMounted(async () => {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
visaIssueDate && readonly visaIssueDate
? dateFormat(visaIssueDate) ? readonly
: dateFormat(visaIssueDate, false, false, true) ? dateFormat(visaIssueDate)
: dateFormat(visaIssueDate, false, false, true)
: undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -150,9 +154,9 @@ onMounted(async () => {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="visaIssueDate && !readonly" v-if="visaIssueDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="visaIssueDate = undefined" @click="visaIssueDate = undefined"
/> />
</template> </template>
@ -188,9 +192,11 @@ onMounted(async () => {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
visaExpiryDate && readonly visaExpiryDate
? dateFormat(visaExpiryDate) ? readonly
: dateFormat(visaExpiryDate, false, false, true) ? dateFormat(visaExpiryDate)
: dateFormat(visaExpiryDate, false, false, true)
: undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -215,9 +221,9 @@ onMounted(async () => {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="visaExpiryDate && !readonly" v-if="visaExpiryDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="visaExpiryDate = undefined" @click="visaExpiryDate = undefined"
/> />
</template> </template>
@ -267,9 +273,11 @@ onMounted(async () => {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
visaStayUntilDate && readonly visaStayUntilDate
? dateFormat(visaStayUntilDate) ? readonly
: dateFormat(visaStayUntilDate, false, false, true) ? dateFormat(visaStayUntilDate)
: dateFormat(visaStayUntilDate, false, false, true)
: undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -295,9 +303,9 @@ onMounted(async () => {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="visaStayUntilDate && !readonly" v-if="visaStayUntilDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="visaStayUntilDate = undefined" @click="visaStayUntilDate = undefined"
/> />
</template> </template>
@ -346,9 +354,11 @@ onMounted(async () => {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
entryDate && readonly entryDate
? dateFormat(entryDate) ? readonly
: dateFormat(entryDate, false, false, true) ? dateFormat(entryDate)
: dateFormat(entryDate, false, false, true)
: undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -373,10 +383,10 @@ onMounted(async () => {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="entryDate && !readonly" v-if="entryDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="entryDate = undefined" @click.stop="entryDate = undefined"
/> />
</template> </template>
</q-input> </q-input>

View file

@ -218,9 +218,11 @@ onMounted(async () => {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
work.workEndDate && readonly work.workEndDate
? dateFormat(work.workEndDate) ? readonly
: dateFormat(work.workEndDate, false, false, true) ? dateFormat(work.workEndDate)
: dateFormat(work.workEndDate, false, false, true)
: undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -241,10 +243,10 @@ onMounted(async () => {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="work.workEndDate && !readonly" v-if="work.workEndDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="work.workEndDate = undefined" @click.stop="work.workEndDate = undefined"
/> />
</template> </template>
</q-input> </q-input>
@ -288,9 +290,11 @@ onMounted(async () => {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
work.workPermitIssuDate && readonly work.workPermitIssuDate
? dateFormat(work.workPermitIssuDate) ? readonly
: dateFormat(work.workPermitIssuDate, false, false, true) ? dateFormat(work.workPermitIssuDate)
: dateFormat(work.workPermitIssuDate, false, false, true)
: undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -311,10 +315,10 @@ onMounted(async () => {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="work.workPermitIssuDate && !readonly" v-if="work.workPermitIssuDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="work.workPermitIssuDate = undefined" @click.stop="work.workPermitIssuDate = undefined"
/> />
</template> </template>
</q-input> </q-input>
@ -348,9 +352,16 @@ onMounted(async () => {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
work.workPermitExpireDate && readonly work.workPermitExpireDate
? dateFormat(work.workPermitExpireDate) ? readonly
: dateFormat(work.workPermitExpireDate, false, false, true) ? dateFormat(work.workPermitExpireDate)
: dateFormat(
work.workPermitExpireDate,
false,
false,
true,
)
: undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -371,10 +382,10 @@ onMounted(async () => {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="work.workPermitExpireDate && !readonly" v-if="work.workPermitExpireDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="work.workPermitExpireDate = undefined" @click.stop="work.workPermitExpireDate = undefined"
/> />
</template> </template>
</q-input> </q-input>