How to show QDate within the QInput using QPopupProxy when width of QInput is larger than QDate

[dmitry.polushkin]

How to show QDate within the QInput using QPopupProxy in case if QInput has width more than QDate?

Please see an example:

https://codepen.io/dmitry-polushkin/pen/GRoOQMV

Is there are any way to control with of the q-popup-proxy?
Maybe you can suggest some other solutions?

[Stanley]

@dmitry-polushkin Please see the demo.
https://codepen.io/Stanley-549393092/pen/LYGeZMV

[dmitry.polushkin]

@Stanley doesn’t work as expected.

I need to open dialog box when I click on the input, not on the icon.
It opens in a dialog box only when the height is too small, when it’s desktop it opens as dropdown with element full width:

No way to change the width of the calendar container.

[metalsadman]

@dmitry-polushkin there’s a warning above this link
https://quasar.dev/vue-components/popup-proxy#QPopupProxy-API
, also take a look into breakpoint prop, as it sets what mode it will take based on the screen width.

Example:
https://codepen.io/metalsadman/pen/KKVZgRj

[dmitry.polushkin]

@metalsadman thank you so much! Works perfect