Improve date picker demo with input element and add similar demo for …

…time picker (zauberzeug#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 <[email protected]>

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', '''

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)