Multiple QDate with QInput - close on select date



  • 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



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



  • @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



  • @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.


Log in to reply