first commit

kivy_venv/lib/python3.11/site-packages/kivymd/uix/pickers/__init__.py

@@ -0,0 +1,3 @@
+from .colorpicker import MDColorPicker  # NOQA F401
+from .datepicker import MDDatePicker  # NOQA F401
+from .timepicker import MDTimePicker  # NOQA F401

kivy_venv/lib/python3.11/site-packages/kivymd/uix/pickers/colorpicker/__init__.py

@@ -0,0 +1 @@
+from .colorpicker import MDColorPicker  # NOQA F401

kivy_venv/lib/python3.11/site-packages/kivymd/uix/pickers/colorpicker/colorpicker.kv

@@ -0,0 +1,299 @@
+#:import STANDARD_INCREMENT kivymd.material_resources.STANDARD_INCREMENT
+#:import images_path kivymd.images_path
+#:import colors kivymd.color_definitions.colors
+#:import Window kivy.core.window.Window
+
+
+<SelectAlphaChannelWidget>
+    orientation: "vertical"
+    adaptive_height: True
+    spacing: "12dp"
+    padding: 0, 0, 0, "8dp"
+
+    FitImage:
+        size_hint_y: None
+        height: "36dp"
+        source: f"{images_path}/alpha_layer.png"
+        radius: [8,]
+
+        canvas.after:
+            Color:
+                rgba:
+                    root._rgb[:-1] + [root._opacity_value_selected_color]
+            RoundedRectangle:
+                pos: self.pos
+                size: self.size
+                radius: [8,]
+
+    MDSlider:
+        id: slider
+        size_hint_y: None
+        height: "12dp"
+        hint: False
+        max: 1
+        value: root._opacity_value_selected_color
+        on_value:
+            root._opacity_value_selected_color = self.value
+            if root.color_picker: \
+            root.color_picker._opacity_value_selected_color = self.value
+
+
+<SliderItem@MDBoxLayout>
+    spacing: "12dp"
+    color_slider: "Red"
+    max: 255
+    adaptive_height: True
+
+    MDSlider:
+        id: slider
+        size_hint_y: None
+        height: "36dp"
+        color: colors[root.color_slider]["500"]
+        max: root.max
+        value: 1 if root.max == 1 else 0
+        on_value:
+            root.parent.dispatch("on_slide_value", root.parent.get_color())
+
+    MDLabel:
+        adaptive_size: True
+        -text_size: None, None
+        pos_hint: {"center_y": .5}
+        text:
+            str(int(slider.value)) \
+            if root.max != 1 \
+            else str(round(slider.value, 1))
+
+
+<SliderTab>
+    orientation: "vertical"
+    padding: "12dp", "24dp", "12dp", 0
+    spacing: "24dp"
+
+    SliderItem:
+        id: slider_red
+        color_slider: "Red"
+
+    SliderItem:
+        id: slider_green
+        color_slider: "Green"
+
+    SliderItem:
+        id: slider_blue
+        color_slider: "Blue"
+
+    Widget:
+
+    SelectAlphaChannelWidget:
+        id: select_alpha_channel_widget
+        color_picker: root.color_picker
+
+
+<GradientTab>
+    orientation: "vertical"
+    padding: "12dp", "12dp", "12dp", 0
+    spacing: "8dp"
+
+    MDBoxLayout:
+        id: color_selection_box
+        spacing: "12dp"
+
+        Widget:
+            id: gradient_widget
+
+        MDBoxLayout:
+            orientation: "vertical"
+            size_hint_x: None
+            width: "24dp"
+
+            canvas.before:
+                StencilPush
+                RoundedRectangle:
+                    size: self.size
+                    pos: self.pos
+                    radius: root.color_picker.radius_color_scale
+                StencilUse
+
+            canvas.after:
+                StencilUnUse
+                RoundedRectangle:
+                    size: self.size
+                    pos: self.pos
+                    radius: root.color_picker.radius_color_scale
+                StencilPop
+
+            Image:
+                source: f"{images_path}/blue.png"
+                allow_stretch: True
+                keep_ratio: False
+                on_touch_down:
+                    if self.collide_point(*args[1].pos): \
+                    root.updated_canvas(self, args[1])
+
+            Image:
+                source: f"{images_path}/green.png"
+                allow_stretch: True
+                keep_ratio: False
+                on_touch_down:
+                    if self.collide_point(*args[1].pos): \
+                    root.updated_canvas(self, args[1])
+
+            Image:
+                source: f"{images_path}/yellow.png"
+                allow_stretch: True
+                keep_ratio: False
+                on_touch_down:
+                    if self.collide_point(*args[1].pos): \
+                    root.updated_canvas(self, args[1])
+
+            Image:
+                source: f"{images_path}/red.png"
+                allow_stretch: True
+                keep_ratio: False
+                on_touch_down:
+                    if self.collide_point(*args[1].pos): \
+                    root.updated_canvas(self, args[1])
+
+            Image:
+                source: f"{images_path}/black.png"
+                allow_stretch: True
+                keep_ratio: False
+                on_touch_down:
+                    if self.collide_point(*args[1].pos): \
+                    root.updated_canvas(self, args[1])
+
+    SelectAlphaChannelWidget:
+        id: select_alpha_channel_widget
+        color_picker: root.color_picker
+
+
+<TabColorList>
+    rv: rv
+
+    RecycleView:
+        id: rv
+        key_viewclass: "viewclass"
+        key_size: "height"
+
+        RecycleBoxLayout:
+            orientation: "vertical"
+            size_hint_y: None
+            height: self.minimum_height
+            padding: "8dp"
+            spacing: "8dp"
+            default_size_hint: 1, None
+            default_size: None, dp(48)
+
+
+<ColorListItem>
+    size_hint_y: None
+    padding: "12dp"
+    md_bg_color: root.color
+    radius: [8,]
+
+    MDLabel:
+        text: root.hue_code
+        theme_text_color: "Custom"
+        text_color: root.text_color
+        halign: "center"
+
+
+<MDColorPicker>
+    # These are the sums of the widths of the `TypeColorButton` buttons in the
+    # `type_color_button_box` box.
+    size_hint_min_x: dp(264)
+
+    MDBoxLayout:
+        orientation: "vertical"
+
+        MDBoxLayout:
+            id: header
+            orientation: "vertical"
+            padding: 0, "8dp", 0, 0
+            spacing: "8dp"
+            radius: root.radius[:2] + [0, 0]
+            size_hint_y: None
+            height: STANDARD_INCREMENT
+            md_bg_color:
+                app.theme_cls.primary_color \
+                if not root.default_color \
+                else root.default_color
+
+            MDLabel:
+                id: lbl_color_value
+                halign: "center"
+                shorten: True
+                bold: True
+                markup: True
+
+            MDBoxLayout:
+                id: type_color_button_box
+                adaptive_height: True
+
+                TypeColorButton:
+                    text: "HEX"
+                    group: "x"
+                    size_hint_x: 1
+                    on_release: root.type_color = self.text
+
+                TypeColorButton:
+                    text: "RGB"
+                    group: "x"
+                    size_hint_x: 1
+                    on_release: root.type_color = self.text
+
+                TypeColorButton:
+                    text: "RGBA"
+                    group: "x"
+                    size_hint_x: 1
+                    on_release: root.type_color = self.text
+
+        MDBottomNavigation:
+            id: bottom_navigation
+            use_text: False
+            on_switch_tabs: root.dispatch("on_switch_tabs", *args)
+
+            MDBottomNavigationItem:
+                id: bottom_navigation_gradient
+                name: "bottom navigation gradient"
+                icon: "gradient-vertical"
+
+            MDBottomNavigationItem:
+                id: view_headline
+                name: "view headline"
+                icon: "view-headline"
+
+                ColorListTab:
+                    id: color_list_tabs
+                    text_color_normal: 0, 0, 0, 1
+                    on_tab_switch: self.generates_list_colors(*args)
+                    color_picker: root
+
+            MDBottomNavigationItem:
+                id: tune
+                name: "tune"
+                icon: "tune"
+
+                SliderTab:
+                    color_picker: root
+                    on_slide_value:
+                        root.dispatch("on_select_color", args[1])
+
+        MDBoxLayout:
+            size_hint_y: None
+            height: "48dp"
+            md_bg_color: app.theme_cls.bg_dark
+            radius: [0, 0] + root.radius[2:]
+
+            MDFlatButton:
+                text: root.text_button_ok
+                size_hint: 1, 1
+                on_release:
+                    root.dispatch( \
+                    "on_release", \
+                    root.type_color, \
+                    root._get_selected_color(root.selected_color))
+
+            MDFlatButton:
+                text: root.text_button_cancel
+                size_hint: 1, 1
+                on_release: root.dismiss()

kivy_venv/lib/python3.11/site-packages/kivymd/uix/pickers/colorpicker/colorpicker.py

@@ -0,0 +1,657 @@
+"""
+Components/ColorPicker
+======================
+
+.. versionadded:: 1.0.0
+
+.. rubric:: Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination..
+
+.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/color-picker-preview.png
+    :align: center
+
+Usage
+-----
+
+.. code-block:: python
+
+    from typing import Union
+
+    from kivy.lang import Builder
+
+    from kivymd.app import MDApp
+    from kivymd.uix.pickers import MDColorPicker
+
+    KV = '''
+    MDScreen:
+
+        MDTopAppBar:
+            id: toolbar
+            title: "MDTopAppBar"
+            pos_hint: {"top": 1}
+
+        MDRaisedButton:
+            text: "OPEN PICKER"
+            pos_hint: {"center_x": .5, "center_y": .5}
+            md_bg_color: toolbar.md_bg_color
+            on_release: app.open_color_picker()
+    '''
+
+
+    class MyApp(MDApp):
+        def build(self):
+            return Builder.load_string(KV)
+
+        def open_color_picker(self):
+            color_picker = MDColorPicker(size_hint=(0.45, 0.85))
+            color_picker.open()
+            color_picker.bind(
+                on_select_color=self.on_select_color,
+                on_release=self.get_selected_color,
+            )
+
+        def update_color(self, color: list) -> None:
+            self.root.ids.toolbar.md_bg_color = color
+
+        def get_selected_color(
+            self,
+            instance_color_picker: MDColorPicker,
+            type_color: str,
+            selected_color: Union[list, str],
+        ):
+            '''Return selected color.'''
+
+            print(f"Selected color is {selected_color}")
+            self.update_color(selected_color[:-1] + [1])
+
+        def on_select_color(self, instance_gradient_tab, color: list) -> None:
+            '''Called when a gradient image is clicked.'''
+
+
+    MyApp().run()
+
+.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/color-picker-usage.png
+    :align: center
+"""
+
+import os
+import struct
+from io import BytesIO
+from typing import List, Union
+
+from kivy.clock import Clock
+from kivy.core.image import Image as CoreImage
+from kivy.graphics import RoundedRectangle
+from kivy.lang import Builder
+from kivy.metrics import dp
+from kivy.properties import (
+    ColorProperty,
+    ListProperty,
+    NumericProperty,
+    ObjectProperty,
+    OptionProperty,
+    StringProperty,
+    VariableListProperty,
+)
+from kivy.uix.behaviors import ButtonBehavior
+from kivy.utils import get_color_from_hex, get_hex_from_color
+from PIL import Image as PilImage
+from PIL import ImageDraw
+
+from kivymd import uix_path
+from kivymd.color_definitions import colors as _colors
+from kivymd.color_definitions import text_colors
+from kivymd.uix.behaviors import RectangularRippleBehavior
+from kivymd.uix.behaviors.toggle_behavior import MDToggleButton
+from kivymd.uix.boxlayout import MDBoxLayout
+from kivymd.uix.button import MDRaisedButton
+from kivymd.uix.dialog import BaseDialog
+from kivymd.uix.tab import MDTabs, MDTabsBase, MDTabsLabel
+
+__all__ = ("MDColorPicker",)
+
+with open(
+    os.path.join(uix_path, "pickers", "colorpicker", "colorpicker.kv"),
+    encoding="utf-8",
+) as kv_file:
+    Builder.load_string(kv_file.read())
+
+
+class TypeColorButton(MDRaisedButton, MDToggleButton):
+    """
+    The class implements the button to switch the color type -
+    'RGBA', 'HEX', 'RGB'.
+    """
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.theme_text_color = "Custom"
+        self.text_color = (0, 0, 0, 1)
+        self.elevation = 0
+
+
+class SelectAlphaChannelWidget(MDBoxLayout):
+    """
+    The class implements the widget with the current color and slider to set
+    the value of the transparency of the selected color.
+    """
+
+    # :class:`~kivymd.uix.colorpicker.MDColorPicker` class.
+    color_picker = ObjectProperty()
+
+    # The `RGB` value for the transparency preview widget of the selected
+    # color.
+    _rgb = ColorProperty([0, 0, 0, 0])
+    # The opacity value for the transparency preview widget of the selected
+    # color.
+    _opacity_value_selected_color = NumericProperty(1)
+
+    def on_color_picker(
+        self, instance_select_alpha_channel_widget, instance_color_picker
+    ) -> None:
+        instance_color_picker.bind(_rgb=self.set_scale_rgb)
+
+    def set_scale_rgb(
+        self,
+        instance_color_picker,
+        color: Union[List[int], List[float]],
+    ) -> None:
+        if color[0] > 1:
+            self._rgb = [x / 255.0 for x in color]
+        else:
+            self._rgb = color
+
+
+class SliderTab(MDBoxLayout):
+    """
+    The class has implemented `RGB` value sliders and a scale for setting the
+    transparency value of the selected color. This is the third tab on the
+    bottom navigation panel.
+    """
+
+    # :class:`~kivymd.uix.colorpicker.MDColorPicker` class.
+    color_picker = ObjectProperty()
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.register_event_type("on_slide_value")
+
+    def get_color(self) -> List[float]:
+        return [
+            self.ids.slider_red.ids.slider.value / 255,
+            self.ids.slider_green.ids.slider.value / 255,
+            self.ids.slider_blue.ids.slider.value / 255,
+            self.color_picker._opacity_value_selected_color,
+        ]
+
+    def on_slide_value(self, *args) -> None:
+        """Basic event handler for changing the slider value."""
+
+
+class GradientTab(MDBoxLayout):
+    """
+    The class implements a tab with a gradient, a color selection scale and
+    a scale for setting the transparency value of the selected color.
+    This is the first tab on the bottom navigation panel.
+    """
+
+    # :class:`~kivymd.uix.colorpicker.MDColorPicker` class.
+    color_picker = ObjectProperty()
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.rectangle = None
+        self.texture = None
+        Clock.schedule_once(lambda x: self.create_gradient_texture())
+        Clock.schedule_once(self.create_canvas_with_gradient_texture)
+
+    def create_gradient_texture(
+        self, r_g_b=None, interval: Union[int, float] = 0
+    ) -> None:
+        """
+        Creates a gradient value buffer and texture object.
+        Called when clicking on the gradient bar to the right.
+        """
+
+        # TODO: Perhaps there is a better way to create a gradient.
+        #  The implementation using the PIL package is most likely not the most
+        #  better. In any case, performance tests should be carried out.
+        gradient_widget_width = int(self.ids.gradient_widget.width)
+        gradient_widget_height = int(self.ids.gradient_widget.height - dp(100))
+        img = PilImage.new(
+            "RGBA", (gradient_widget_width, gradient_widget_height), "#FFFFFF"
+        )
+        draw = ImageDraw.Draw(img)
+
+        if not self.color_picker.default_color:
+            r, g, b = (
+                r_g_b
+                if r_g_b
+                else self.color_picker.get_rgb(self.theme_cls.primary_color)
+            )
+        else:
+            r, g, b = [
+                int(value * 255)
+                for value in self.color_picker.default_color[:-1]
+            ]
+        self.color_picker._rgb = [r, g, b]
+        (
+            r_adjacent_color_constant,
+            g_adjacent_color_constant,
+            b_adjacent_color_constant,
+        ) = (
+            self.color_picker.adjacent_color_constants
+            if r_g_b != (0, 0, 0)
+            else (0.40, 0.40, 0.40)  # if the selected color is black
+        )
+
+        for i in range(gradient_widget_width):
+            r, g, b = (
+                r + r_adjacent_color_constant,
+                g + g_adjacent_color_constant,
+                b + b_adjacent_color_constant,
+            )
+            draw.line(
+                (i, 0, i, gradient_widget_width), fill=(int(r), int(g), int(b))
+            )
+
+        data = BytesIO()
+        img.save(data, format="png")
+        data.seek(0)
+        self.texture = CoreImage(BytesIO(data.read()), ext="png").texture
+
+    def create_canvas_with_gradient_texture(
+        self, interval: Union[int, float]
+    ) -> None:
+        """Creates a canvas with a gradient texture."""
+
+        with self.ids.color_selection_box.canvas:
+            self.rectangle = RoundedRectangle(
+                texture=self.texture,
+                pos=self.ids.gradient_widget.pos,
+                size=self.ids.gradient_widget.size,
+                radius=self.color_picker.radius,
+                group="gradient",
+            )
+            self.bind(
+                size=lambda instance, size: Clock.schedule_once(
+                    lambda dt: self._update_canvas(instance, size)
+                )
+            )
+
+    def get_rgba_color_from_touch_region(self, widget, touch) -> List[int]:
+        """
+        Returns the color of the pixel in the gradient that was clicked.
+        """
+
+        pixel = widget.texture.get_region(*touch.pos, 1, 1)
+        rgba = struct.unpack("4B", pixel.pixels)
+        return rgba
+
+    def updated_canvas(self, widget, touch, color=None) -> None:
+        """
+        Called when clicking on the gradient bar to the right.
+        Updates the color of the gradient texture.
+        """
+
+        if self.color_picker.default_color:
+            self.color_picker.default_color = None
+
+        self.ids.color_selection_box.canvas.remove_group("gradient")
+        if not color:
+            # (0-255, 0-255, 0-255, 0-255)
+            color = self.get_rgba_color_from_touch_region(widget, touch)
+            self.create_gradient_texture(color[:-1])
+            self.color_picker.dispatch(
+                "on_select_color", [x / 255.0 for x in color]
+            )
+        else:
+            self.create_gradient_texture(color)
+        self.create_canvas_with_gradient_texture(0)
+
+    def on_touch_down(self, touch):
+        """Handles the ``self.ids.gradient_widget`` touch event."""
+
+        if self.ids.gradient_widget.collide_point(*touch.pos):
+            color = self.get_rgba_color_from_touch_region(self, touch)
+            self.color_picker.dispatch(
+                "on_select_color", [x / 255.0 for x in color]
+            )
+        return super().on_touch_down(touch)
+
+    def _update_canvas(self, instance_gradient_widget, size: list) -> None:
+        self.rectangle.size = self.ids.gradient_widget.size
+        self.rectangle.pos = self.ids.gradient_widget.pos
+
+
+class TabColorList(MDBoxLayout, MDTabsBase):
+    """Implements a tab for :class:`~ColorListTab` class."""
+
+
+class ColorListTab(MDTabs):
+    """
+    The class implements a tab with tabs with a list of colors.
+    This is the second tab on the bottom navigation panel.
+    """
+
+    # :class:`~kivymd.uix.colorpicker.MDColorPicker` class.
+    color_picker = ObjectProperty()
+
+    def generates_list_colors(
+        self,
+        instance_color_list_tab,
+        instance_tab_color_list: TabColorList,
+        instance_tabs_label: MDTabsLabel,
+        tab_label_text: str,
+    ) -> None:
+        """
+        Generates list of colors.
+        Called when you click the tab of :class:`~TabColorList` class.
+        """
+
+        if not tab_label_text:
+            tab_label_text = "Red"
+        if not instance_tab_color_list.rv.data:
+            for hue in _colors[tab_label_text]:
+                color = get_color_from_hex(_colors[tab_label_text][hue])
+                if tab_label_text == "Light":
+                    text_color = (0, 0, 0, 1)
+                elif tab_label_text == "Dark":
+                    text_color = (1, 1, 1, 1)
+                else:
+                    text_color = text_colors[tab_label_text][hue]
+                instance_tab_color_list.rv.data.append(
+                    {
+                        "viewclass": "ColorListItem",
+                        "color": color,
+                        "hue_code": hue,
+                        "text_color": text_color,
+                        "on_press": lambda x=color: self.on_press_color_item(x),
+                    }
+                )
+
+    def on_press_color_item(self, color: list) -> None:
+        """Called when you click on the color item from the list of colors."""
+
+        rgb = [int(value * 255) for value in color[:-1]]
+        self.color_picker._rgb = rgb
+        self.background_color = color
+        self.color_picker.dispatch("on_select_color", color)
+
+
+class ColorListItem(RectangularRippleBehavior, ButtonBehavior, MDBoxLayout):
+    """Implements the item for the list of :class:`~TabColorList` class."""
+
+    color = ColorProperty()
+    text_color = ColorProperty()
+    hue_code = StringProperty()
+
+
+class MDColorPicker(BaseDialog):
+    adjacent_color_constants = ListProperty([0.299, 0.887, 0.411])
+    """
+    A list of values that are used to create the gradient. These values are
+    selected empirically. Each of these values will be added to the selected
+    ``RGB`` value, thus creating colors that are close in value.
+
+    :attr:`adjacent_color_constants` is an :class:`~kivy.properties.ListProperty`
+    and defaults to `[0.299, 0.887, 0.411]`.
+    """
+
+    default_color = ColorProperty(None, allownone=True)
+    """
+    Default color value in (r, g, b, a) or string format. The set color value
+    will be used when you open the dialog.
+
+    :attr:`default_color` is an :class:`~kivy.properties.ColorProperty`
+    and defaults to `None`.
+    """
+
+    type_color = OptionProperty("RGB", options=["RGBA", "HEX", "RGB"])
+    """
+    Type of color.
+    Available options are: `'RGBA'`, `'HEX'`, `'RGB'`.
+
+    :attr:`type_color` is an :class:`~kivy.properties.OptionProperty`
+    and defaults to `'RGB'`.
+    """
+
+    background_down_button_selected_type_color = ColorProperty([1, 1, 1, 0.3])
+    """
+    Button background for choosing a color type ('RGBA', 'HEX', 'HSL', 'RGB')
+    in (r, g, b, a) or string format.
+
+    .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/color-picker-background-down-button-selected-type-color.png
+        :align: center
+
+    :attr:`background_down_button_selected_type_color` is an
+    :class:`~kivy.properties.ColorProperty` and defaults to `[1, 1, 1, 0.3]`.
+    """
+
+    radius_color_scale = VariableListProperty([8])
+    """
+    The radius value for the color scale.
+
+    .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/color-picker-gradient-scale-radius.png
+        :align: center
+
+    :attr:`radius` is an :class:`~kivy.properties.VariableListProperty`
+    and defaults to `[8, 8, 8, 8]`.
+    """
+
+    text_button_ok = StringProperty("SELECT")
+    """
+    Color selection button text.
+
+    :attr:`text_button_ok` is an :class:`~kivy.properties.StringProperty`
+    and defaults to `'SELECT'`.
+    """
+
+    text_button_cancel = StringProperty("CANCEL")
+    """
+    Cancel button text.
+
+    :attr:`text_button_cancel` is an :class:`~kivy.properties.StringProperty`
+    and defaults to `'CANCEL'`.
+    """
+
+    selected_color = None
+    # One of the objects of classes:
+    # :class:`~GradientTab`, :class:`~ColorListTab`, :class:`~SliderTab`.
+    _current_tab = ObjectProperty()
+    # The `RGB` value for the transparency preview widget of the selected
+    # color.
+    _rgb = ListProperty()
+    # The opacity value for the transparency preview widget of the selected
+    # color.
+    _opacity_value_selected_color = NumericProperty(1)
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.gradient_tab = None
+        self.register_event_type("on_select_color")
+        self.register_event_type("on_switch_tabs")
+        self.register_event_type("on_release")
+        self.on_background_down_button_selected_type_color(
+            None, self.background_down_button_selected_type_color
+        )
+
+        self.on_background_down_button_selected_type_color(
+            None, self.background_down_button_selected_type_color
+        )
+        Clock.schedule_once(lambda x: self.on_type_color(self), 1)
+
+    def update_color_slider_item_bottom_navigation(self, color: list) -> None:
+        """
+        Updates the color of the slider that sets the transparency value of the
+        selected color and the color of bottom navigation items.
+        """
+
+        if "select_alpha_channel_widget" in self._current_tab.ids:
+            self._current_tab.ids.select_alpha_channel_widget.ids.slider.color = (
+                color
+            )
+        self.ids.bottom_navigation.text_color_active = color
+
+    def update_color_type_buttons(self, color: list) -> None:
+        """
+        Updating button colors (display buttons of type of color) to match the
+        selected color.
+        """
+
+        for instance_toggle_button in self.ids.type_color_button_box.children:
+            if instance_toggle_button.state != "down":
+                instance_toggle_button.md_bg_color = color
+            instance_toggle_button.background_normal = color
+
+    def get_rgb(self, color: list) -> list:
+        """Returns an ``RGB`` list of values from 0 to 255."""
+
+        return [
+            int(value * 255)
+            for value in (color[:-1] if len(color) == 4 else color)
+        ]
+
+    def on_background_down_button_selected_type_color(
+        self, instance_color_picker, color: list
+    ) -> None:
+        def set_background_down(interval: Union[float, int]) -> None:
+            for (
+                instance_toggle_button
+            ) in self.ids.type_color_button_box.children:
+                instance_toggle_button.background_down = color
+                if self.type_color == instance_toggle_button.text:
+                    instance_toggle_button.state = "down"
+
+        Clock.schedule_once(set_background_down)
+
+    def on_type_color(
+        self,
+        instance_color_picker,
+        type_color: str = "",
+        interval: Union[float, int] = 0,
+    ) -> None:
+        """Called when buttons are clicked to set the color type."""
+
+        if not type_color:
+            type_color = self.type_color
+
+        if self._rgb:
+            rgb = self._rgb if self._rgb[0] > 1 else self.get_rgb(self._rgb)
+            opacity = self._opacity_value_selected_color
+            color = ""
+
+            if type_color == "RGB":
+                self.selected_color = [value for value in rgb]
+                color = f"RGB({', '.join([str(value) for value in self.selected_color])})"
+            elif type_color == "RGBA":
+                self.selected_color = [x / 255.0 for x in rgb] + [opacity]
+                color = f"RGBA({', '.join([str(x / 255.0) for x in rgb])}, {opacity})"
+            elif type_color == "HEX":
+                self.selected_color = get_hex_from_color(
+                    [x / 255.0 for x in rgb] + [opacity]
+                )
+                color = f"HEX({self.selected_color})"
+
+            self.ids.lbl_color_value.text = color
+
+    def on_open(self) -> None:
+        """Default open event handler."""
+
+        if not self.ids.bottom_navigation_gradient.children:
+            self.gradient_tab = GradientTab(color_picker=self)
+            self._current_tab = self.gradient_tab
+            self.ids.bottom_navigation_gradient.add_widget(self.gradient_tab)
+
+        super().on_open()
+
+    def on_select_color(self, color: list) -> None:
+        """Called when a gradient image is clicked."""
+
+        if len(color) == 3:
+            color += [self._opacity_value_selected_color]
+
+        self.ids.header.md_bg_color = color
+        self._rgb = color[:-1]
+        self.on_type_color(self, self.type_color)
+        self.update_color_type_buttons(color)
+        self.update_color_slider_item_bottom_navigation(color)
+
+    def on_switch_tabs(
+        self,
+        bottom_navigation_instance,
+        bottom_navigation_item_instance,
+        name_tab,
+    ) -> None:
+        """Called when switching tabs of bottom navigation."""
+
+        if name_tab == "bottom navigation gradient":
+            self._current_tab = self.gradient_tab
+            bottom_navigation_item_instance.children[0].updated_canvas(
+                None,
+                None,
+                self._rgb if self._rgb[0] > 1 else self.get_rgb(self._rgb),
+            )
+            instance_slider_tab = (
+                bottom_navigation_instance.ids.tab_manager.get_screen(
+                    "tune"
+                ).children[0]
+            )
+            select_alpha_channel_widget = (
+                self.gradient_tab.ids.select_alpha_channel_widget
+            )
+            select_alpha_channel_widget.ids.slider.value = (
+                instance_slider_tab.ids.select_alpha_channel_widget.ids.slider.value
+            )
+            select_alpha_channel_widget.ids.slider.color = [
+                x / 255.0 for x in self._rgb
+            ] + [1]
+        elif name_tab == "tune":
+            if self._rgb[0] <= 1:
+                color = self.get_rgb(self._rgb)
+            else:
+                color = self._rgb
+            instance_slider_tab = self.ids.tune.children[0]
+            self._current_tab = instance_slider_tab
+            instance_slider_tab.ids.slider_red.ids.slider.value = color[0]
+            instance_slider_tab.ids.slider_green.ids.slider.value = color[1]
+            instance_slider_tab.ids.slider_blue.ids.slider.value = color[2]
+            instance_slider_tab.ids.select_alpha_channel_widget.ids.slider.value = (
+                self._opacity_value_selected_color
+            )
+        elif name_tab == "view headline":
+            color = self._rgb + [1]
+            color_list_tabs = self.ids.view_headline.children[0]
+            self._current_tab = color_list_tabs
+            try:
+                color_list_tabs.background_color = color
+            except ValueError:
+                color_list_tabs.background_color = [x / 255.0 for x in color][
+                    :-1
+                ] + [1]
+            if not color_list_tabs.get_tab_list():
+                for color in _colors.keys():
+                    tab_widget = TabColorList(title=str(color))
+                    color_list_tabs.add_widget(tab_widget)
+
+    def on_release(self, *args):
+        """Called when the `SELECT` button is pressed"""
+
+    def _get_selected_color(self, selected_color: Union[list, str]) -> list:
+        """
+        Convert [0-255, 0-255, 0-255] and '#rrggbb' to kivy color format.
+        Return kivy color format.
+        """
+
+        rgba = [0, 0, 0, 0]
+        if isinstance(selected_color, list):
+            if selected_color[0] > 1:
+                rgba = [x / 255.0 for x in selected_color] + [
+                    self._opacity_value_selected_color
+                ]
+            else:
+                rgba = selected_color
+        elif isinstance(selected_color, str):
+            rgba = get_color_from_hex(selected_color)[:-1] + [
+                self._opacity_value_selected_color
+            ]
+        return rgba

kivy_venv/lib/python3.11/site-packages/kivymd/uix/pickers/datepicker/__init__.py

@@ -0,0 +1,5 @@
+from .datepicker import (  # NOQA F401
+    BaseDialogPicker,
+    DatePickerInputField,
+    MDDatePicker,
+)

kivy_venv/lib/python3.11/site-packages/kivymd/uix/pickers/datepicker/datepicker.kv

@@ -0,0 +1,392 @@
+#:import os os
+#:import date datetime.date
+#:import calendar calendar
+#:import platform platform
+#:import Clock kivy.clock.Clock
+#:import images_path kivymd.images_path
+
+
+<DatePickerBaseTooltip>
+    on_enter:
+        self.tooltip_text = "" if self.owner \
+        and self.owner._input_date_dialog_open \
+        or self.owner._select_year_dialog_open \
+        else self.hint_text
+
+
+<DatePickerIconTooltipButton>
+
+
+<MDDatePicker>
+    _calendar_layout: _calendar_layout
+    size_hint: None, None
+    size:
+        (dp(328), dp(512) - root._shift_dialog_height) \
+        if root.theme_cls.device_orientation == "portrait" \
+        else (dp(528), dp(328) - root._shift_dialog_height)
+
+    MDRelativeLayout:
+        id: container
+        background: os.path.join(images_path, "transparent.png")
+
+        canvas:
+            Color:
+                rgb: root.primary_color or app.theme_cls.primary_color
+            RoundedRectangle:
+                size:
+                    (dp(328), dp(120)) \
+                    if root.theme_cls.device_orientation == "portrait" \
+                    else (dp(168), dp(328) - root._shift_dialog_height)
+                pos:
+                    (0, root.height - dp(120)) \
+                    if root.theme_cls.device_orientation == "portrait" \
+                    else (0, 0)
+                radius:
+                    (root.radius[0], root.radius[1], dp(0), dp(0)) \
+                    if root.theme_cls.device_orientation == "portrait" \
+                    else (root.radius[0], dp(0), dp(0), root.radius[3])
+            Color:
+                rgba: root.accent_color or app.theme_cls.bg_normal
+            RoundedRectangle:
+                size:
+                    (dp(328), dp(512) - dp(120) - root._shift_dialog_height) \
+                    if root.theme_cls.device_orientation == "portrait" \
+                    else (dp(360), dp(328) - root._shift_dialog_height)
+                pos:
+                    (0, 0) \
+                    if root.theme_cls.device_orientation == "portrait" \
+                    else (dp(168), 0)
+                radius:
+                    (dp(0), dp(0), root.radius[2], root.radius[3]) \
+                    if root.theme_cls.device_orientation == "portrait" \
+                    else (dp(0), root.radius[1], root.radius[2], dp(0))
+
+        MDLabel:
+            id: label_title
+            font_style: "Body2"
+            bold: True
+            theme_text_color: "Custom"
+            size_hint_x: None
+            width: root.width
+            adaptive_height: True
+            text: root.title
+            font_name: root.font_name
+            pos:
+                (dp(24), root.height - self.height - dp(18)) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else (dp(24), root.height - self.height - dp(24))
+            text_color: root.text_toolbar_color or root.specific_text_color
+
+        MDLabel:
+            id: label_full_date
+            font_style: "H4"
+            theme_text_color: "Custom"
+            size_hint_x: None
+            width: root.width
+            adaptive_height: True
+            font_name: root.font_name
+            markup: True
+            pos:
+                (dp(24), root.height - dp(120) + dp(18)) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else \
+                ( \
+                dp(24) if not root._input_date_dialog_open else dp(168) + dp(24), \
+                root.height - self.height - dp(96) \
+                )
+            text: root._date_label_text
+            text_color:
+                root.text_toolbar_color or root.specific_text_color \
+                if root.theme_cls.device_orientation == "portrait" else \
+                root.primary_color or self.theme_cls.primary_color \
+                if root._input_date_dialog_open else \
+                root.text_toolbar_color or root.specific_text_color
+
+        RecycleView:
+            id: _year_layout
+            key_viewclass: "viewclass"
+            size_hint: None, None
+            size: _calendar_layout.size
+            pos: _calendar_layout.pos
+            disabled: True
+
+            canvas.before:
+                PushMatrix
+                Scale:
+                    x: root._scale_year_layout
+                    y: root._scale_year_layout
+                    origin: self.center
+            canvas.after:
+                PopMatrix
+
+            SelectYearList:
+                cols: 3
+                default_size: dp(170), dp(36)
+                default_size_hint: 1, None
+                size_hint_y: None
+                height: self.minimum_height
+
+        MDIconButton:
+            id: edit_icon
+            icon: "pencil"
+            icon_size: "24sp"
+            theme_icon_color: "Custom"
+            on_release:
+                root.transformation_to_dialog_input_date() \
+                if not root._input_date_dialog_open else \
+                Clock.schedule_once(root.transformation_from_dialog_input_date, .15)
+            x:
+                (root.width - self.width - dp(12)) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else dp(12)
+            y:
+                (root.height - dp(120) + dp(12)) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else  dp(12)
+            text_color: root.text_toolbar_color or root.specific_text_color
+
+        MDLabel:
+            id: label_month_selector
+            font_style: "Body2"
+            -text_size: None, None
+            theme_text_color: "Custom"
+            adaptive_size: True
+            text: calendar.month_name[root.month].capitalize() + " " + str(root.year)
+            font_name: root.font_name
+            pos:
+                (dp(24), root.height - dp(120) - self.height - dp(20)) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else (dp(168) + dp(24), label_title.y)
+            text_color: root.text_color or app.theme_cls.text_color
+
+        DatePickerIconTooltipButton:
+            id: triangle
+            owner: root
+            icon: "menu-down"
+            ripple_scale: .5
+            theme_icon_color: "Custom"
+            hint_text: "Choose year"
+            on_release:
+                root.transformation_to_dialog_select_year() \
+                if not root._select_year_dialog_open else \
+                root.transformation_from_dialog_select_year()
+            pos:
+                (label_month_selector.width + dp(14), root.height - dp(123) - self.height) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else (dp(180) + label_month_selector.width, label_title.y - dp(14))
+            text_color: root.text_color or app.theme_cls.text_color
+            md_bg_color_disabled: 0, 0, 0, 0
+
+        DatePickerIconTooltipButton:
+            id: chevron_left
+            owner: root
+            icon: "chevron-left"
+            on_release: root.change_month("prev")
+            theme_icon_color: "Custom"
+            hint_text: "Previous month"
+            x:
+                dp(228) if root.theme_cls.device_orientation == "portrait" \
+                else dp(418)
+            y:
+                root.height - dp(120) - self.height / 2 - dp(30) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else dp(272)
+            text_color: root.text_color or app.theme_cls.text_color
+
+        DatePickerIconTooltipButton:
+            id: chevron_right
+            owner: root
+            icon: "chevron-right"
+            on_release: root.change_month("next")
+            theme_icon_color: "Custom"
+            hint_text: "Next month"
+            x:
+                dp(272) if root.theme_cls.device_orientation == "portrait" \
+                else dp(464)
+            y:
+                root.height - dp(120) - self.height / 2 - dp(30) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else dp(272)
+            text_color: root.text_color or app.theme_cls.text_color
+
+        # TODO: Replace the GridLayout with a RecycleView
+        # if it improves performance.
+        GridLayout:
+            id: _calendar_layout
+            cols: 7
+            size_hint: None, None
+            size:
+                (dp(44 * 7), dp(40 * 7)) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else (dp(46 * 7), dp(32 * 7))
+            col_default_width:
+                dp(42) if root.theme_cls.device_orientation == "portrait" \
+                else dp(39)
+            padding:
+                (dp(2), 0) if root.theme_cls.device_orientation == "portrait" \
+                else (dp(7), 0)
+            spacing:
+                (dp(2), 0) if root.theme_cls.device_orientation == "portrait" \
+                else (dp(7), 0)
+            pos:
+                (dp(10), dp(56)) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else (dp(168) + dp(20), dp(44))
+
+            canvas.before:
+                PushMatrix
+                Scale:
+                    x: root._scale_calendar_layout
+                    y: root._scale_calendar_layout
+                    origin: self.center
+            canvas.after:
+                PopMatrix
+
+        MDFlatButton:
+            id: ok_button
+            width: dp(32)
+            pos: root.width - self.width, dp(10)
+            text: "OK"
+            theme_text_color: "Custom"
+            font_name: root.font_name
+            text_color: root.text_button_color or root.theme_cls.primary_color
+            on_release: root.on_ok_button_pressed()
+
+        MDFlatButton:
+            id: cancel_button
+            text: "CANCEL"
+            on_release: root.dispatch("on_cancel", None)
+            theme_text_color: "Custom"
+            pos: root.width - self.width - ok_button.width - dp(10), dp(10)
+            font_name: root.font_name
+            text_color: root.text_button_color or root.theme_cls.primary_color
+
+
+<DatePickerDaySelectableItem>
+    size_hint: None, None
+    size:
+        (dp(42), dp(42)) \
+        if root.theme_cls.device_orientation == "portrait" \
+        else (dp(32), dp(32))
+    disabled: True
+
+    # Fill marking the available dates of the range, if using the `range` mode
+    # or use `min_date/max_date`.
+    canvas.before:
+        Color:
+            rgba:
+                (self.owner.selector_color or self.theme_cls.primary_color)[:-1] + [.3] \
+                if self.is_in_range \
+                else (0, 0, 0, 0)
+        RoundedRectangle:
+            size:
+                (dp(44), dp(32)) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else \
+                (dp(32), dp(28)) \
+                if self.is_range_end or self.is_week_end or self.is_month_end \
+                else (dp(46), dp(28))
+            pos:
+                (self.x - dp(1.5), self.y + dp(5)) \
+                if root.theme_cls.device_orientation == "portrait" else \
+                (self.x, self.y + 1)
+            radius:
+                [
+                self.width / 2 if self.is_range_start else 0,
+                self.width / 2 if self.is_range_end else 0,
+                self.width / 2 if self.is_range_end else 0,
+                self.width / 2 if self.is_range_start else 0,
+                ]
+
+        # Selection circle.
+        Color:
+            rgba:
+                root.owner.selector_color or self.theme_cls.primary_color \
+                if root.is_selected and not self.disabled \
+                else (0, 0, 0, 0)
+        Ellipse:
+            size:
+                (dp(42), dp(42)) \
+                if root.theme_cls.device_orientation == "portrait" \
+                else (dp(32), dp(32))
+            pos: self.pos
+
+    MDLabel:
+        font_style: "Caption"
+        size_hint_x: None
+        halign: "center"
+        text: root.text
+        font_name: root.owner.font_name
+        theme_text_color: "Custom"
+        text_color:
+            root.owner.accent_color or root.theme_cls.bg_normal \
+            if root.is_selected else \
+            root.owner.text_current_color or root.theme_cls.primary_color \
+            if root.is_today else \
+            root.owner.text_color or root.theme_cls.text_color
+
+<DatePickerWeekdayLabel>
+    font_style: "Caption"
+    theme_text_color: "Custom"
+    size_hint: None, None
+    text_size: self.size
+    halign: "center"
+    valign:
+        "middle" if root.theme_cls.device_orientation == "portrait" \
+        else "center"
+    size:
+        (dp(40), dp(40)) if root.theme_cls.device_orientation == "portrait" \
+        else (dp(32), dp(32))
+    text_color: root.owner.text_weekday_color or app.theme_cls.disabled_hint_text_color
+
+
+<DatePickerYearSelectableItem>
+    font_style: "Caption"
+    size_hint_x: None
+    valign: "middle"
+    halign: "center"
+    text: root.text
+    theme_text_color: "Custom"
+    text_color:
+        (0, 0, 0, 0) \
+        if self.owner is None else \
+        self.owner.accent_color or self.owner.theme_cls.bg_normal \
+        if self.selected else \
+        self.owner.text_color or self.owner.theme_cls.text_color
+    on_text: root.font_name = root.owner.font_name
+
+    canvas.before:
+        Color:
+            rgba:
+                self.owner.selector_color or self.theme_cls.primary_color \
+                if self.selected else \
+                (0, 0, 0, 0)
+        RoundedRectangle:
+            pos: self.x + dp(12), self.y
+            size: self.width - dp(24), self.height
+            radius: [root.height / 2, ]
+
+
+<DatePickerInputFieldContainer>
+    adaptive_height: True
+    size_hint_x: None
+    spacing: dp(8)
+    opacity: 0
+    width:
+        self.owner.width - dp(48) \
+        if root.owner.theme_cls.device_orientation == "portrait" \
+        else self.owner.width - dp(168) - dp(48)
+    y:
+        self.owner.height - dp(123) - self.height - dp(20) \
+        if root.owner.theme_cls.device_orientation == "portrait" \
+        else self.owner.height - self.height - dp(24)
+    x:
+        dp(24) if root.owner.theme_cls.device_orientation == "portrait" \
+        else dp(168) + dp(24)
+
+
+<DatePickerInputField>
+    mode: "fill"
+    hint_text: "dd/mm/yyyy"
+    input_filter: root.input_filter
+    fill_color: root.owner.input_field_background_color or (0, 0, 0, .15)

kivy_venv/lib/python3.11/site-packages/kivymd/uix/pickers/timepicker/__init__.py

@@ -0,0 +1 @@
+from .timepicker import MDTimePicker  # NOQA F401

kivy_venv/lib/python3.11/site-packages/kivymd/uix/pickers/timepicker/timepicker.kv

@@ -0,0 +1,340 @@
+<TimeInputLabel@MDLabel>:
+    theme_text_color: "Custom"
+    font_size: dp(10)
+    halign: "left"
+    valign: "bottom"
+    adaptive_size: True
+
+
+<AmPmSelectorLabel>
+    halign: "center"
+    valign: "center"
+    theme_text_color: "Custom"
+
+
+<AmPmSelector>
+    size_hint: None, None
+
+    canvas.before:
+        Color:
+            rgba: root.border_color
+        RoundedRectangle:
+            pos: self.pos
+            size: self.size
+            radius: [root.border_radius, ]
+
+        #AM
+        Color:
+            rgba: root._am_bg_color
+        RoundedRectangle:
+            pos:
+                [ \
+                self.pos[0] + root.border_width, \
+                self.pos[1] + self.height/2 + self.border_width * 0.5 \
+                ] if self.orientation == "vertical" else \
+                [ \
+                self.pos[0] + root.border_width, \
+                self.pos[1] + root.border_width \
+                ]
+            size:
+                [ \
+                self.size[0] - root.border_width * 2, \
+                self.size[1] / 2 - self.border_width * 1.5 \
+                ] if self.orientation == "vertical" else \
+                [ \
+                self.size[0] / 2 - root.border_width * 1.5, \
+                self.size[1] - root.border_width * 2 \
+                ]
+            radius:
+                [root.border_radius, root.border_radius, 0, 0] \
+                if self.orientation == "vertical" else \
+                [root.border_radius, 0, 0, root.border_radius]
+
+        #PM
+        Color:
+            rgba: root._pm_bg_color
+        RoundedRectangle:
+            pos:
+                [ \
+                self.pos[0] + root.border_width, \
+                self.pos[1] + self.border_width \
+                ] if self.orientation == "vertical" else \
+                [ \
+                self.pos[0] + root.size[0] / 2 + root.border_width / 2, \
+                self.pos[1] + root.border_width \
+                ]
+            size:
+                [ \
+                self.size[0] - root.border_width * 2, \
+                self.size[1] / 2 - self.border_width * 1.5 \
+                ] if self.orientation == "vertical" else \
+                [ \
+                self.size[0] / 2 - root.border_width * 1.5, \
+                self.size[1] - root.border_width * 2 \
+                ]
+            radius:
+                [0, 0, root.border_radius, root.border_radius] \
+                if self.orientation == "vertical" else \
+                [0 ,root.border_radius, root.border_radius, 0]
+
+    # AM
+    AmPmSelectorLabel:
+        text: "AM"
+        on_release: root.selected = "am"
+        text_color: root.text_color
+
+    AmPmSelectorLabel:
+        text: "PM"
+        on_release: root.selected = "pm"
+        text_color: root.text_color
+
+
+<TimeInputTextField>
+    size_hint: None, 1
+    width: dp(96)
+    mode: "fill"
+    active_line: False
+    font_size: dp(56)
+    radius: [dp(10), ]
+    fill_color_normal:
+        root.parent.parent.parent.accent_color \
+        if root.parent.parent.parent.accent_color else \
+        ( \
+        [*root.parent.bg_color_active[:3], 0.5] \
+        if root.parent.state in ["hour", "minute"] else \
+        [*root.bg_color[:3], 0.5] \
+        )
+    fill_color_focus:
+        (1, 1, 1, 0.5) \
+        if root.parent.parent.parent.primary_color else \
+        self.theme_cls.bg_dark
+    text_color_focus:
+        root.parent.parent.parent.accent_color \
+        if root.parent.parent.parent.accent_color else \
+        self.theme_cls.primary_color
+
+
+<TimeInput>
+    size_hint: None, None
+    _hour: hour
+    _minute: minute
+
+    TimeInputTextField:
+        id: hour
+        num_type: "hour"
+        pos: 0, 0
+        text_color: root.text_color
+        disabled: root.disabled
+        on_text: root.dispatch("on_time_input")
+        radius: root.hour_radius
+        on_select:
+            root.dispatch("on_hour_select")
+            root.state = "hour"
+
+    MDLabel:
+        text: ":"
+        size_hint: None, None
+        size: dp(24), dp(80)
+        halign: "center"
+        valign: "center"
+        font_size: dp(50)
+        pos: dp(96), 0
+        theme_text_color: "Custom"
+        text_color: root.text_color
+
+    TimeInputTextField:
+        id: minute
+        num_type: "minute"
+        pos: dp(120), 0
+        text_color: root.text_color
+        disabled: root.disabled
+        on_text: root.dispatch("on_time_input")
+        radius: root.minute_radius
+        on_select:
+            root.dispatch("on_minute_select")
+            root.state = "minute"
+
+
+<CircularSelector>
+    circular_padding: dp(28)
+    size_hint: None, None
+    size: [dp(256), dp(256)]
+    row_spacing: dp(40)
+
+    canvas.before:
+        PushMatrix
+        Scale:
+            origin: self.scale_origin
+            x: root.scale
+            y: root.scale
+        Color:
+            rgba: root.bg_color
+        Ellipse:
+            size: self.size
+            pos: self.pos
+        PushMatrix
+        Scale:
+            origin: self.center
+            x: root.content_scale
+            y: root.content_scale
+        Color:
+            rgb: root.selector_color
+            a: 0 if self.selector_pos == [0, 0] else 1
+        Ellipse:
+            size: self.selector_size, self.selector_size
+            pos:
+                [self.selector_pos[0] -  self.selector_size / 2, \
+                self.selector_pos[1] - self.selector_size / 2]
+        Ellipse:
+            size: dp(10), dp(10)
+            pos: [self.center[0] - dp(5), self.center[1] - dp(5)]
+        Line:
+            points: [self.center, self.selector_pos]
+            width: dp(1)
+    canvas.after:
+        PopMatrix
+        PopMatrix
+
+
+<SelectorLabel>
+    halign: "center"
+    valign: "center"
+    adaptive_size: True
+    theme_text_color: "Custom"
+
+
+<MDTimePicker>
+    auto_dismiss: True
+    size_hint: None, None
+    _time_input: _time_input
+    _selector: _selector
+    _am_pm_selector: _am_pm_selector
+    _minute_label: _minute_label
+    _hour_label: _hour_label
+
+    MDRelativeLayout:
+        canvas.before:
+            Color:
+                rgba:
+                    root.primary_color \
+                    if root.primary_color \
+                    else root.theme_cls.bg_normal
+
+            RoundedRectangle:
+                size: self.size
+                radius: root.radius
+
+        MDLabel:
+            id: label_title
+            font_style: "Body2"
+            bold: True
+            theme_text_color: "Custom"
+            size_hint_x: None
+            width: root.width
+            adaptive_height: True
+            text: root.title
+            font_name: root.font_name
+            pos: (dp(24), root.height - self.height - dp(18))
+            text_color:
+                root.text_toolbar_color if root.text_toolbar_color \
+                else root.theme_cls.text_color
+
+        TimeInput:
+            id: _time_input
+            bg_color:
+                root.accent_color if root.accent_color else \
+                root.theme_cls.primary_light
+            bg_color_active:
+                root.selector_color if root.selector_color \
+                else root.theme_cls.primary_color
+            text_color:
+                root.input_field_text_color if root.input_field_text_color else \
+                root.theme_cls.text_color
+            on_time_input: root._get_time_input(*self.get_time())
+            on_hour_select: _selector.switch_mode("hour")
+            on_minute_select: _selector.switch_mode("minute")
+            minute_radius: root.minute_radius
+            hour_radius: root.hour_radius
+
+        TimeInputLabel:
+            id: _hour_label
+            text: "Hour"
+            opacity: 0
+            text_color:
+                root.text_toolbar_color if root.text_toolbar_color else \
+                root.theme_cls.secondary_text_color
+
+        TimeInputLabel:
+            id: _minute_label
+            text: "Minute"
+            opacity: 0
+            text_color:
+                root.text_toolbar_color if root.text_toolbar_color else \
+                root.theme_cls.secondary_text_color
+
+        AmPmSelector:
+            id: _am_pm_selector
+            owner: root
+            border_color:
+                root.accent_color if root.accent_color else \
+                root.theme_cls.primary_color
+            border_radius: root.am_pm_radius
+            bg_color:
+                root.primary_color if root.primary_color else \
+                root.theme_cls.bg_normal
+            border_width: root.am_pm_border_width
+            bg_color_active:
+                root.selector_color if root.selector_color else \
+                root.theme_cls.primary_light
+            text_color:
+                root.input_field_text_color if root.input_field_text_color else \
+                root.theme_cls.text_color
+            on_selected: root._get_am_pm(self.selected)
+
+        CircularSelector:
+            id: _selector
+            text_color:
+                root.text_color if root.text_color else \
+                root.theme_cls.text_color
+            bg_color:
+                root.accent_color if root.accent_color else \
+                root.theme_cls.primary_light
+            selector_color:
+                root.primary_color if root.primary_color else \
+                root.theme_cls.primary_color
+            font_name: root.font_name
+            on_selector_change: root._get_dial_time(_selector)
+
+        MDIconButton:
+            id: input_clock_switch
+            icon: "keyboard"
+            pos: dp(12), dp(8)
+            theme_icon_color: "Custom"
+            icon_size: "24dp"
+            on_release: root._switch_input()
+            icon_color:
+                root.text_toolbar_color if root.text_toolbar_color else \
+                root.theme_cls.secondary_text_color
+
+        MDFlatButton:
+            id: cancel_button
+            text: "CANCEL"
+            on_release: root.dispatch("on_cancel", None)
+            theme_text_color: "Custom"
+            pos: root.width - self.width - ok_button.width - dp(10), dp(10)
+            font_name: root.font_name
+            text_color:
+                root.theme_cls.primary_color \
+                if not root.text_button_color else root.text_button_color
+
+        MDFlatButton:
+            id: ok_button
+            width: dp(32)
+            pos: root.width - self.width, dp(10)
+            text: "OK"
+            theme_text_color: "Custom"
+            font_name: root.font_name
+            text_color:
+                root.theme_cls.primary_color \
+                if not root.text_button_color else root.text_button_color
+            on_release: root.dispatch("on_save", root._get_data())

kivy_venv/lib/python3.11/site-packages/kivymd/uix/pickers/timepicker/timepicker.py

@@ -0,0 +1,832 @@
+"""
+Components/TimePicker
+=====================
+
+.. seealso::
+
+    `Material Design spec, Time picker <https://material.io/components/time-pickers>`_
+
+.. rubric:: Includes time picker.
+
+.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/picker-previous.png
+    :align: center
+
+.. warning:: The widget is under testing. Therefore, we would be grateful if
+    you would let us know about the bugs found.
+
+.. rubric:: Usage
+
+.. tabs::
+
+    .. tab:: Declarative KV style
+
+        .. code-block:: python
+
+            from kivy.lang import Builder
+
+            from kivymd.app import MDApp
+            from kivymd.uix.pickers import MDTimePicker
+
+            KV = '''
+            MDFloatLayout:
+
+                MDRaisedButton:
+                    text: "Open time picker"
+                    pos_hint: {'center_x': .5, 'center_y': .5}
+                    on_release: app.show_time_picker()
+            '''
+
+
+            class Test(MDApp):
+                def build(self):
+                    self.theme_cls.theme_style = "Dark"
+                    self.theme_cls.primary_palette = "Orange"
+                    return Builder.load_string(KV)
+
+                def show_time_picker(self):
+                    '''Open time picker dialog.'''
+
+                    time_dialog = MDTimePicker()
+                    time_dialog.open()
+
+
+            Test().run()
+
+    .. tab:: Declarative python style
+
+        .. code-block:: python
+
+            from kivymd.app import MDApp
+            from kivymd.uix.button import MDRaisedButton
+            from kivymd.uix.pickers import MDTimePicker
+            from kivymd.uix.screen import MDScreen
+
+
+            class Test(MDApp):
+                def build(self):
+                    self.theme_cls.theme_style = "Dark"
+                    self.theme_cls.primary_palette = "Orange"
+                    return (
+                        MDScreen(
+                            MDRaisedButton(
+                                text="Open time picker",
+                                pos_hint={'center_x': .5, 'center_y': .5},
+                                on_release=self.show_time_picker,
+                            )
+                        )
+                    )
+
+                def show_time_picker(self, *args):
+                    '''Open time picker dialog.'''
+
+                    MDTimePicker().open()
+
+
+            Test().run()
+
+.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/MDTimePicker.png
+    :align: center
+
+Binding method returning set time
+---------------------------------
+
+.. code-block:: python
+
+    def show_time_picker(self):
+        time_dialog = MDTimePicker()
+        time_dialog.bind(time=self.get_time)
+        time_dialog.open()
+
+    def get_time(self, instance, time):
+        '''
+        The method returns the set time.
+
+        :type instance: <kivymd.uix.picker.MDTimePicker object>
+        :type time: <class 'datetime.time'>
+        '''
+
+        return time
+
+Open time dialog with the specified time
+----------------------------------------
+
+Use the :attr:`~MDTimePicker.set_time` method of the
+:class:`~MDTimePicker.` class.
+
+.. code-block:: python
+
+    def show_time_picker(self):
+        from datetime import datetime
+
+        # Must be a datetime object
+        previous_time = datetime.strptime("03:20:00", '%H:%M:%S').time()
+        time_dialog = MDTimePicker()
+        time_dialog.set_time(previous_time)
+        time_dialog.open()
+
+.. note:: For customization of the :class:`~MDTimePicker` class, see the
+    documentation in the :class:`~kivymd.uix.pickers.datepicker.datepicker.BaseDialogPicker` class.
+
+.. code-block:: python
+
+        MDTimePicker(
+            primary_color="brown",
+            accent_color="red",
+            text_button_color="white",
+        ).open()
+
+.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/time-picker-customization.png
+    :align: center
+"""
+
+__all__ = ("MDTimePicker",)
+
+import datetime
+import os
+import re
+import time
+from typing import List, Union
+
+from kivy.animation import Animation
+from kivy.clock import Clock
+from kivy.event import EventDispatcher
+from kivy.lang import Builder
+from kivy.metrics import dp
+from kivy.properties import (
+    BooleanProperty,
+    ColorProperty,
+    ListProperty,
+    NumericProperty,
+    ObjectProperty,
+    OptionProperty,
+    StringProperty,
+    VariableListProperty,
+)
+from kivy.uix.behaviors import ButtonBehavior
+from kivy.vector import Vector
+
+from kivymd import uix_path
+from kivymd.uix.boxlayout import MDBoxLayout
+from kivymd.uix.circularlayout import MDCircularLayout
+from kivymd.uix.label import MDLabel
+from kivymd.uix.pickers.datepicker import BaseDialogPicker
+from kivymd.uix.relativelayout import MDRelativeLayout
+from kivymd.uix.textfield import MDTextField
+
+with open(
+    os.path.join(uix_path, "pickers", "timepicker", "timepicker.kv"),
+    encoding="utf-8",
+) as kv_file:
+    Builder.load_string(kv_file.read())
+
+
+class AmPmSelectorLabel(ButtonBehavior, MDLabel):
+    pass
+
+
+class AmPmSelector(MDBoxLayout):
+    border_radius = NumericProperty()
+    border_color = ColorProperty()
+    bg_color = ColorProperty()
+    bg_color_active = ColorProperty()
+    border_width = NumericProperty()
+    am = ObjectProperty()
+    am = ObjectProperty()
+    owner = ObjectProperty()
+    text_color = ColorProperty()
+    selected = StringProperty()
+
+    _am_bg_color = ColorProperty()
+    _pm_bg_color = ColorProperty()
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.bind(selected=self._upadte_color)
+        Clock.schedule_once(self._upadte_color)
+
+    def _upadte_color(self, *args):
+        bg_color = (
+            self.owner.accent_color
+            if self.owner.accent_color
+            else self.bg_color_active
+        )
+        if self.selected == "am":
+            self._am_bg_color = bg_color
+            self._pm_bg_color = (
+                self.owner.primary_color
+                if self.owner.accent_color
+                else self.bg_color
+            )
+        elif self.selected == "pm":
+            self._am_bg_color = (
+                self.owner.primary_color
+                if self.owner.accent_color
+                else self.bg_color
+            )
+            self._pm_bg_color = bg_color
+
+
+class TimeInputTextField(MDTextField):
+    num_type = OptionProperty("hour", options=["hour", "minute"])
+    hour_regx = "^[0-9]$|^0[1-9]$|^1[0-2]$"
+    minute_regx = "^[0-9]$|^0[0-9]$|^[1-5][0-9]$"
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        Clock.schedule_once(self.set_text)
+        self.register_event_type("on_select")
+        self.bind(text_color_focus=self.setter("hint_text_color_normal"))
+
+    def validate_time(self, text) -> Union[None, re.Match]:
+        reg = self.hour_regx if self.num_type == "hour" else self.minute_regx
+        return re.match(reg, text)
+
+    def insert_text(self, text, from_undo=False):
+        strip_text = self.text.strip()
+        current_string = "".join([strip_text, text])
+        if not self.validate_time(current_string):
+            text = ""
+        return super().insert_text(text, from_undo=from_undo)
+
+    def set_text(self, *args) -> None:
+        """
+        Texts should be center aligned. Now we are setting the padding of text
+        to somehow make them aligned.
+        """
+
+        def set_text(*args):
+            if not self.text:
+                self.text = " "
+
+            self._refresh_text(self.text)
+            max_size = max(self._lines_rects, key=lambda r: r.size[0]).size
+            dx = (self.width - max_size[0]) / 2.0
+            dy = (self.height - max_size[1]) / 2.0
+            self.padding = [dx, dy, dx, dy]
+
+            if len(self.text) > 1:
+                self.text = self.text.replace(" ", "")
+
+        Clock.schedule_once(set_text)
+
+    def on_focus(self, *args) -> None:
+        super().on_focus(*args)
+        if self.text.strip():
+            if (
+                not self.focus
+                and int(self.text) == 0
+                and self.num_type == "hour"
+            ):
+                self.text = "12"
+        else:
+            self.text = " 12" if self.num_type == "hour" else " 00"
+
+    def on_select(self, *args) -> None:
+        pass
+
+    def on_touch_down(self, touch):
+        if self.collide_point(*touch.pos):
+            self.dispatch("on_select")
+            super().on_touch_down(touch)
+
+
+class TimeInput(MDRelativeLayout):
+    """Implements two text fields for displaying and entering a time value."""
+
+    bg_color = ColorProperty()
+    bg_color_active = ColorProperty()
+    text_color = ColorProperty()
+    disabled = BooleanProperty(True)
+    minute_radius = ListProperty([0, 0, 0, 0])
+    hour_radius = ListProperty([0, 0, 0, 0])
+    state = StringProperty("hour")
+
+    _hour = ObjectProperty()
+    _minute = ObjectProperty()
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.register_event_type("on_time_input")
+        self.register_event_type("on_hour_select")
+        self.register_event_type("on_minute_select")
+
+    def set_time(self, time_list) -> None:
+        hour, minute = time_list
+        self._hour.text = hour
+        self._minute.text = minute
+
+    def get_time(self) -> List[str]:
+        hour = self._hour.text.strip()
+        minute = self._minute.text.strip()
+        return [hour, minute]
+
+    def on_time_input(self, *args) -> None:
+        pass
+
+    def on_minute_select(self, *args) -> None:
+        pass
+
+    def on_hour_select(self, *args) -> None:
+        pass
+
+    def _update_padding(self, *args):
+        self._hour.set_text()
+        self._minute.set_text()
+
+
+class SelectorLabel(MDLabel):
+    pass
+
+
+class CircularSelector(MDCircularLayout, EventDispatcher):
+    """Implements clock face display."""
+
+    mode = OptionProperty("hour", options=["hour", "minute"])  # and military
+    text_color = ColorProperty()
+    selected_hour = StringProperty("12")
+    selected_minute = StringProperty("0")
+    selector_size = NumericProperty("48dp")
+    selector_pos = ListProperty([0, 0])
+    selector_color = ColorProperty()
+    bg_color = ColorProperty()
+    font_name = StringProperty()
+    scale = NumericProperty(1)
+    content_scale = NumericProperty(1)
+    t = StringProperty("out_quad")
+    d = NumericProperty(0.2)
+    scale_origin = ListProperty([100, 100])
+
+    _centers_pos = ListProperty()
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.bind(
+            mode=self._update_labels,
+            selected_hour=self.update_time,
+            selected_minute=self.update_time,
+        )
+        Clock.schedule_once(lambda x: self._update_labels(animate=False))
+        self.register_event_type("on_selector_change")
+
+    def do_layout(self, *largs, **kwargs):
+        self.update_time()
+        return super().do_layout(*largs, **kwargs)
+
+    def set_selector(self, selected) -> bool:
+        """Sets the selector's position towards the given text."""
+
+        widget = None
+        for wid in self.children:
+            wid.text_color = self.text_color
+            if wid.text == selected:
+                widget = wid
+        if not widget:
+            return False
+        self.selector_pos = widget.center
+        widget.text_color = [1, 1, 1, 1]
+        self.dispatch("on_selector_change")
+        return True
+
+    def set_time(self, selected) -> None:
+        if self.mode == "hour":
+            self.selected_hour = selected
+        elif self.mode == "minute":
+            self.selected_minute = selected
+
+    def update_time(self, *args) -> None:
+        if self.mode == "hour":
+            self.set_selector(self.selected_hour)
+        elif self.mode == "minute":
+            self.set_selector(self.selected_minute)
+
+    def get_selected(self) -> str:
+        return self.selected
+
+    def switch_mode(self, mode) -> None:
+        if mode != self.mode:
+            self.mode = mode
+
+    def on_touch_down(self, touch):
+        if self.collide_point(*touch.pos):
+            touch.grab(self)
+            closest_wid = self._get_closest_widget(touch.pos)
+            self.set_time(closest_wid.text)
+            return True
+
+    def on_touch_move(self, touch):
+        if touch.grab_current == self:
+            closest_wid = self._get_closest_widget(touch.pos)
+            self.set_time(closest_wid.text)
+
+    def on_touch_up(self, touch):
+        if touch.grab_current is self:
+            touch.ungrab(self)
+            return True
+
+    def on_selector_change(self, *args):
+        pass
+
+    def _update_labels(self, animate=True, *args):
+        """
+        This method builds the selector based on current mode which currently
+        can be hour or minute.
+        """
+
+        if self.mode == "hour":
+            param = (1, 12)
+            self.degree_spacing = 30
+            self.start_from = 60
+        elif self.mode == "minute":
+            param = (0, 59, 5)
+            self.degree_spacing = 6
+            self.start_from = 90
+        elif self.mode == "military":
+            param = (1, 24)
+            self.degree_spacing = 30
+            self.start_from = 90
+        if animate:
+            anim = Animation(content_scale=0, t=self.t, d=self.d)
+            anim.bind(on_complete=lambda *args: self._add_items(*param))
+            anim.start(self)
+        else:
+            self._add_items(*param)
+
+    def _add_items(self, start, end, step=1):
+        """
+        Adds all number in range `[start, end + 1]` to the circular layout with
+        the specified step. Step means that all widgets will be added to layout
+        but sets the opacity for skipped widgets to `0` because we are using
+        the label's text as a reference to the selected number so we have to
+        add these to layout.
+        """
+
+        self.clear_widgets()
+        i = 0
+        for x in range(start, end + 1):
+            label = SelectorLabel(
+                text=f"{x}",
+            )
+            if i % step != 0:
+                label.opacity = 0
+            self.bind(
+                text_color=label.setter("text_color"),
+                font_name=label.setter("font_name"),
+            )
+            self.add_widget(label)
+            i += 1
+        Clock.schedule_once(self.update_time)
+        Clock.schedule_once(self._get_centers, 0.1)
+        anim = Animation(content_scale=1, t=self.t, d=self.d)
+        anim.start(self)
+
+    def _get_centers(self, *args):
+        """
+        Returns a list of all center. we use this for positioning the selector
+        indicator.
+        """
+
+        self._centers_pos = []
+        for child in self.children:
+            self._centers_pos.append(child.center)
+
+    def _get_closest_widget(self, pos):
+        """
+        Returns the nearest widget to the given position. we use this to create
+        the magnetic effect.
+        """
+
+        distance = [Vector(pos).distance(point) for point in self._centers_pos]
+        if not distance:
+            return False
+        index = distance.index(min(distance))
+        return self.children[index]
+
+
+class MDTimePicker(BaseDialogPicker):
+    hour = StringProperty("12")
+    """
+    Current hour.
+
+    :attr:`hour` is an :class:`~kivy.properties.StringProperty`
+    and defaults to `'12'`.
+    """
+
+    minute = StringProperty("0")
+    """
+    Current minute.
+
+    :attr:`minute` is an :class:`~kivy.properties.StringProperty`
+    and defaults to `0`.
+    """
+
+    minute_radius = VariableListProperty(dp(5), length=4)
+    """
+    Radius of the minute input field.
+
+    .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/time-picker-minute-radius.png
+        :align: center
+
+    :attr:`minute_radius` is an :class:`~kivy.properties.ListProperty`
+    and defaults to `[dp(5), dp(5), dp(5), dp(5)]`.
+    """
+
+    hour_radius = VariableListProperty(dp(5), length=4)
+    """
+    Radius of the hour input field.
+
+    .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/time-picker-hour-radius.png
+        :align: center
+
+    :attr:`hour_radius` is an :class:`~kivy.properties.ListProperty`
+    and defaults to `[dp(5), dp(5), dp(5), dp(5)]`.
+    """
+
+    am_pm_radius = NumericProperty("5dp")
+    """
+    Radius of the AM/PM selector.
+
+    .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/time-picker-am-pm-radius.png
+        :align: center
+
+    :attr:`am_pm_radius` is an :class:`~kivy.properties.NumericProperty`
+    and defaults to `dp(5)`.
+    """
+
+    am_pm_border_width = NumericProperty("1dp")
+    """
+    Width of the AM/PM selector's borders.
+
+    .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/time-picker-am-pm-border-width.png
+        :align: center
+
+    :attr:`am_pm_border_width` is an :class:`~kivy.properties.NumericProperty`
+    and defaults to `dp(1)`.
+    """
+
+    am_pm = OptionProperty("am", options=["am", "pm"])
+    """
+    Current AM/PM mode.
+
+    :attr:`am_pm` is an :class:`~kivy.properties.OptionProperty`
+    and defaults to `'am'`.
+    """
+
+    animation_duration = NumericProperty(0.3)
+    """
+    Duration of the animations.
+
+    :attr:`animation_duration` is an :class:`~kivy.properties.NumericProperty`
+    and defaults to `0.2`.
+    """
+
+    animation_transition = StringProperty("out_quad")
+    """
+    Transition type of the animations.
+
+    :attr:`animation_transition` is an :class:`~kivy.properties.StringProperty`
+    and defaults to `'out_quad'`.
+    """
+
+    time = ObjectProperty(allownone=True)
+    """
+    Returns the current time object.
+
+    :attr:`time` is an :class:`~kivy.properties.ObjectProperty`
+    and defaults to `None`.
+    """
+
+    _state = StringProperty()
+    _selector = ObjectProperty()
+    _time_input = ObjectProperty()
+    _am_pm_selector = ObjectProperty()
+    _hour_label = ObjectProperty()
+    _minute_label = ObjectProperty()
+    _anim_playing = BooleanProperty(False)
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.bind(
+            hour=self._set_current_time,
+            minute=self._set_current_time,
+            am_pm=self._set_current_time,
+        )
+        self.theme_cls.bind(device_orientation=self._check_orienation)
+        if self.title == "SELECT DATE":
+            self.title = "SELECT TIME"
+        self.set_time(datetime.time(hour=12, minute=0))  # default time
+        self._check_orienation()
+
+    def set_time(self, time_obj) -> None:
+        """Manually set time dialog with the specified time."""
+
+        hour = time_obj.hour
+        minute = time_obj.minute
+        if hour > 12:
+            hour -= 12
+            mode = "pm"
+        else:
+            mode = "am"
+        hour = str(hour)
+        minute = str(minute)
+        self._set_time_input(hour, minute)
+        self._set_dial_time(hour, minute)
+        self._set_am_pm(mode)
+
+    def get_state(self) -> str:
+        """
+        Returns the current state of TimePicker.
+        Can be one of `portrait`, `landscape` or `input`.
+        """
+
+        return self._state
+
+    def _get_dial_time(self, instance):
+        mode = instance.mode
+        if mode == "hour":
+            self.hour = instance.selected_hour
+        elif mode == "minute":
+            self.minute = instance.selected_minute
+        else:
+            raise Exception("invalid mode for MDTimePicker: " % mode)
+        self._set_time_input(self.hour, self.minute)
+
+    def _set_dial_time(self, hour, minute):
+        self._selector.selected_minute = minute
+        self._selector.selected_hour = hour
+
+    def _get_time_input(self, hour, minute):
+        if hour:
+            self.hour = f"{int(hour):01d}"
+        if minute:
+            self.minute = f"{int(minute):01d}"
+        self._set_dial_time(self.hour, self.minute)
+
+    def _set_time_input(self, hour, minute):
+        hour = f"{int(hour):02d}"
+        minute = f"{int(minute):02d}"
+        if self._state != "input":
+            self._time_input.set_time([hour, minute])
+
+    def _get_am_pm(self, selected):
+        self.am_pm = selected
+
+    def _set_am_pm(self, selected: str) -> None:
+        """Used by set_time() to manually set the mode to "am" or "pm"."""
+        self.am_pm = selected
+        self._am_pm_selector.mode = self.am_pm
+        self._am_pm_selector.selected = self.am_pm
+
+    def _get_data(self):
+        try:
+            if time.strftime("%p"):
+                result = datetime.datetime.strptime(
+                    f"{int(self.hour):02d}:{int(self.minute):02d} {self.am_pm}",
+                    "%I:%M %p",
+                ).time()
+            else:
+                result = datetime.datetime.strptime(
+                    f"{int(self.hour):02d}:{int(self.minute):02d}",
+                    "%I:%M",
+                ).time()
+            return result
+        except ValueError:
+            return None  # hour is zero
+
+    def _check_orienation(self, *args, do_anim=False):
+        orientation = self.theme_cls.device_orientation
+        if self._state != "input" and orientation != self._state:
+            self._update_pos_size(orientation, anim=do_anim)
+
+    def _update_pos_size(self, orientation, anim=False):
+        d = self.animation_duration
+        # time input
+        time_input_pos = (
+            [dp(24), dp(368)]
+            if orientation == "portrait"
+            else (
+                [dp(24), dp(178)]
+                if orientation == "landscape"
+                else [dp(24), dp(96)]
+            )
+        )
+        if anim:
+            _time_input = Animation(
+                pos=time_input_pos,
+                d=d,
+                t=self.animation_transition,  # 80 - 8,
+            )
+            _time_input.start(self._time_input)
+        else:
+            self._time_input.pos = time_input_pos
+
+        self._time_input.disabled = False if orientation == "input" else True
+        self._time_input.size = (
+            [dp(216), dp(62)] if orientation == "input" else [dp(216), dp(72)]
+        )
+        Clock.schedule_once(self._time_input._update_padding)
+
+        # Circular selector.
+        if orientation == "input":
+            if self.theme_cls.device_orientation == "portrait":
+                selector_pos = [dp(34), dp(-256)]
+                self._selector.scale_origin = [dp(162), dp(200)]
+            else:
+                selector_pos = [dp(324), dp(-19)]
+                self._selector.scale_origin = [dp(292), dp(109)]
+        elif orientation == "portrait":
+            self._selector.pos = selector_pos = [dp(36), dp(76)]
+        else:
+            self._selector.pos = selector_pos = [dp(304), dp(76)]
+
+        Animation(
+            pos=selector_pos,
+            scale=0 if orientation == "input" else 1,
+            opacity=0 if orientation == "input" else 1,
+            d=d,
+            t=self.animation_transition,
+        ).start(self._selector)
+
+        # AM/PM selector.
+        am_pm_pos = (
+            [dp(252), dp(368)]
+            if orientation == "portrait"
+            else (
+                [dp(24), dp(126)]
+                if orientation == "landscape"
+                else [dp(252), dp(96)]
+            )
+        )
+        am_pm_size = (
+            [dp(52), dp(80)]
+            if orientation == "portrait"
+            else (
+                [dp(216), dp(40)]
+                if orientation == "landscape"
+                else [dp(48), dp(70)]
+            )
+        )
+        if anim:
+            Animation(
+                pos=am_pm_pos,
+                size=am_pm_size,
+                d=d,
+                t=self.animation_transition,
+            ).start(self._am_pm_selector)
+        else:
+            self._am_pm_selector.pos = am_pm_pos
+            self._am_pm_selector.size = am_pm_size
+
+        self._am_pm_selector.orientation = (
+            "horizontal" if orientation == "landscape" else "vertical"
+        )
+
+        # MDTimePicker.
+        time_picker_size = (
+            [dp(328), dp(500)]
+            if orientation == "portrait"
+            else (
+                [dp(584), dp(368)]
+                if orientation == "landscape"
+                else [dp(324), dp(218)]
+            )
+        )
+        if anim:
+            Animation(
+                size=time_picker_size,
+                d=d,
+                t=self.animation_transition,
+            ).start(self)
+        else:
+            self.size = time_picker_size
+
+        # Minute label.
+        Animation(
+            pos=[dp(144), dp(76)],
+            opacity=1 if orientation == "input" else 0,
+            d=d,
+            t=self.animation_transition,
+        ).start(self._minute_label)
+
+        # Hour label.
+        Animation(
+            pos=[dp(24), dp(76)],
+            opacity=1 if orientation == "input" else 0,
+            d=d,
+            t=self.animation_transition,
+        ).start(self._hour_label)
+
+        self._state = orientation
+        self.ids.input_clock_switch.icon = (
+            "clock-time-four-outline" if orientation == "input" else "keyboard"
+        )
+
+    def _set_current_time(self, *args):
+        self.time = self._get_data()
+
+    def _switch_input(self):
+        self._update_pos_size(
+            self.theme_cls.device_orientation
+            if self._state == "input"
+            else "input",
+            anim=True,
+        )