nicegui/website/more_documentation/date_documentation.py

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)