Multiple QDate with QInput - close on select date

[trondulseth]

Hi all,

I have to identical date selectors on one page (just the v-model differs):

<q-input v-model="workorder.esDate" label="start">
	<template v-slot:append>
		<q-icon name="mdi-calendar-check" class="cursor-pointer">
			<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
				<q-date
					v-model="workorder.esDate"
					@input="() => $refs.qDateProxy.hide()"
					first-day-of-week="1"
					mask="DD.MM.YYYY"
				/>
			</q-popup-proxy>
		</q-icon>
	</template>
</q-input>

<q-input v-model="workorder.efDate" label="end">
	<template v-slot:append>
		<q-icon name="mdi-calendar-check" class="cursor-pointer">
			<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
				<q-date
					v-model="workorder.efDate"
					@input="() => $refs.qDateProxy.hide()"
					first-day-of-week="1"
					mask="DD.MM.YYYY"
				/>
			</q-popup-proxy>
		</q-icon>
	</template>
</q-input>

When I open the date select window and then click a date on the last one - it closes just beautifully. But if I click a date in the first one it does not close… and it is a bit cofusing for the user if they selected a date or not, and how to close the window.

I guess they hide() function kinda conflicts between the two components… so the big question is:
Is there a way to make both windows close when a date is selected?

cheers from Norway
Trond

[metalsadman]

@trondulseth you are using same v-model on the input. anyway please make a reproduction codepen that we can test.

[trondulseth]

@metalsadman there is a slight differensce - esDate and efDate (estimated start & estimated finish). Here is a codepen where you can see the problem: https://codepen.io/trondulseth-me/pen/OJPqyeM (though icons are not showing)

The first calendar does not close when selecting a date
The second calendar closes when selecting a date

[metalsadman]

@trondulseth havent look at your pen yet, but yeah i had issue recently with dynamic popup proxies, almost similar to yours. i found using vmodel for the popup proxy is better to use than refs for hiding/showing it.

[beatscribe]

https://codepen.io/rattjp/pen/qBqooZE
I had the same issue and found this to work.