#270 introduce ui.date and ui.time

nicegui/elements/date.py

@@ -0,0 +1,23 @@
+from typing import Callable, Optional
+
+from .mixins.value_element import ValueElement
+
+
+class Date(ValueElement):
+
+    def __init__(self,
+                 value: Optional[str] = None,
+                 *,
+                 mask: str = 'YYYY-MM-DD',
+                 on_change: Optional[Callable] = None) -> None:
+        """Date Input
+
+        This element is based on Quasar's `QDate <https://quasar.dev/vue-components/date>`_ component.
+        The date is a string in the format defined by the `mask` parameter.
+
+        :param value: the initial date
+        :param mask: the format of the date string (default: 'YYYY-MM-DD')
+        :param on_change: callback to execute when changing the date
+        """
+        super().__init__(tag='q-date', value=value, on_value_change=on_change)
+        self._props['mask'] = mask

nicegui/elements/time.py

@@ -0,0 +1,23 @@
+from typing import Callable, Optional
+
+from .mixins.value_element import ValueElement
+
+
+class Time(ValueElement):
+
+    def __init__(self,
+                 value: Optional[str] = None,
+                 *,
+                 mask: str = 'HH:mm',
+                 on_change: Optional[Callable] = None) -> None:
+        """Time Input
+
+        This element is based on Quasar's `QTime <https://quasar.dev/vue-components/date>`_ component.
+        The time is a string in the format defined by the `mask` parameter.
+
+        :param value: the initial time
+        :param mask: the format of the time string (default: 'HH:mm')
+        :param on_change: callback to execute when changing the time
+        """
+        super().__init__(tag='q-time', value=value, on_value_change=on_change)
+        self._props['mask'] = mask

nicegui/ui.py

@@ -12,6 +12,7 @@ from .elements.color_input import ColorInput as color_input
 from .elements.color_picker import ColorPicker as color_picker
 from .elements.colors import Colors as colors
 from .elements.column import Column as column
+from .elements.date import Date as date
 from .elements.dialog import Dialog as dialog
 from .elements.expansion import Expansion as expansion
 from .elements.html import Html as html
@@ -39,6 +40,7 @@ from .elements.separator import Separator as separator
 from .elements.slider import Slider as slider
 from .elements.switch import Switch as switch
 from .elements.table import Table as table
+from .elements.time import Time as time
 from .elements.toggle import Toggle as toggle
 from .elements.tooltip import Tooltip as tooltip
 from .elements.tree import Tree as tree

tests/test_date.py

@@ -0,0 +1,13 @@
+from nicegui import ui
+
+from .screen import Screen
+
+
+def test_date(screen: Screen):
+    ui.date(value='2023-01-01')
+
+    screen.open('/')
+    screen.should_contain('Sun, Jan 1')
+
+    screen.click('31')
+    screen.should_contain('Tue, Jan 31')

tests/test_time.py

@@ -0,0 +1,20 @@
+from nicegui import ui
+
+from .screen import Screen
+
+
+def test_time(screen: Screen):
+    t = ui.time(value='01:23')
+    ui.label().bind_text_from(t, 'value')
+
+    screen.open('/')
+    screen.should_contain('01:23')
+
+    screen.click('8')
+    screen.should_contain('08:23')
+
+    screen.click('45')
+    screen.should_contain('08:45')
+
+    screen.click('PM')
+    screen.should_contain('20:45')

website/reference.py

@@ -148,6 +148,16 @@ def create_full() -> None:
         picker = ui.color_picker(on_pick=lambda e: button.style(f'background-color:{e.color}!important'))
         button = ui.button(on_click=picker.open).props('icon=colorize')
 
+    @example(ui.date)
+    def date_example():
+        ui.date(value='2023-01-01', on_change=lambda e: result.set_text(e.value))
+        result = ui.label()
+
+    @example(ui.time)
+    def time_example():
+        ui.time(value='12:00', on_change=lambda e: result.set_text(e.value))
+        result = ui.label()
+
     @example(ui.upload)
     def upload_example():
         ui.upload(on_upload=lambda e: ui.notify(f'Uploaded {e.name}')).classes('max-w-full')