From 2e59c32e9c5c26ced8ef7b9887a24caaa2c14cfd Mon Sep 17 00:00:00 2001 From: Thomas Lamant Date: Sun, 16 Jun 2024 15:17:59 +0200 Subject: [PATCH] Improve date picker demo with input element and add similar demo for time picker (#3226) * docs(date): fix menu used before being declared * docs(date): remove useless lambda * docs(date): add auto-close and no-parent-event props * docs(time): add demo with input element * code review * use "Close" button instead of auto-close prop --------- Co-authored-by: Falko Schindler --- .../content/date_documentation.py | 13 ++++++++---- .../content/time_documentation.py | 21 +++++++++++++++++++ 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/website/documentation/content/date_documentation.py b/website/documentation/content/date_documentation.py index fc49e56de..9879af764 100644 --- a/website/documentation/content/date_documentation.py +++ b/website/documentation/content/date_documentation.py @@ -13,16 +13,21 @@ def main_demo() -> None: This demo shows how to implement a date picker with an input element. We place an icon in the input element's append slot. When the icon is clicked, we open a menu with a date picker. + [QMenu](https://quasar.dev/vue-components/menu)'s "no-parent-event" prop is used + to prevent opening the menu when clicking into the input field. + As the menu doesn't come with a "Close" button by default, we add one for convenience. The date is bound to the input element's value. So both the input element and the date picker will stay in sync whenever the date is changed. ''') -def date(): +def date_picker_demo(): with ui.input('Date') as date: + with ui.menu().props('no-parent-event') as menu: + with ui.date().bind_value(date): + with ui.row().classes('justify-end'): + ui.button('Close', on_click=menu.close).props('flat') with date.add_slot('append'): - ui.icon('edit_calendar').on('click', lambda: menu.open()).classes('cursor-pointer') - with ui.menu() as menu: - ui.date().bind_value(date) + ui.icon('edit_calendar').on('click', menu.open).classes('cursor-pointer') @doc.demo('Date filter', ''' diff --git a/website/documentation/content/time_documentation.py b/website/documentation/content/time_documentation.py index d983dcbc5..0117d5be9 100644 --- a/website/documentation/content/time_documentation.py +++ b/website/documentation/content/time_documentation.py @@ -9,4 +9,25 @@ def main_demo() -> None: result = ui.label() +@doc.demo('Input element with time picker', ''' + This demo shows how to implement a time picker with an input element. + We place an icon in the input element's append slot. + When the icon is clicked, we open a menu with a time picker. + [QMenu](https://quasar.dev/vue-components/menu)'s "no-parent-event" prop is used + to prevent opening the menu when clicking into the input field. + As the menu doesn't come with a "Close" button by default, we add one for convenience. + + The time is bound to the input element's value. + So both the input element and the time picker will stay in sync whenever the time is changed. +''') +def time_picker_demo(): + with ui.input('Time') as time: + with ui.menu().props('no-parent-event') as menu: + with ui.time().bind_value(time): + with ui.row().classes('justify-end'): + ui.button('Close', on_click=menu.close).props('flat') + with time.add_slot('append'): + ui.icon('access_time').on('click', menu.open).classes('cursor-pointer') + + doc.reference(ui.time)