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

View file

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

View file

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

View file

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

View file

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

View file

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