Procházet zdrojové kódy

add demo for input with date picker

Falko Schindler před 2 roky
rodič
revize
08c6b95e34
1 změnil soubory, kde provedl 19 přidání a 0 odebrání
  1. 19 0
      website/more_documentation/date_documentation.py

+ 19 - 0
website/more_documentation/date_documentation.py

@@ -1,6 +1,25 @@
 from nicegui import ui
 
+from ..documentation_tools import text_demo
+
 
 def main_demo() -> None:
     ui.date(value='2023-01-01', on_change=lambda e: result.set_text(e.value))
     result = ui.label()
+
+
+def more() -> None:
+    @text_demo('Input element with date picker', '''
+        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.
+
+        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():
+        with ui.input('Date') as date:
+            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)