TimePicker#
#
See also
Time pickers help users select and set a specific time.
Time pickers are modal and cover the main content
Two types: dial and input
Users can select hours, minutes, or periods of time
Make sure time can easily be selected by hand on a mobile device
Vertical dial time picker
Horizontal dial time picker
Time picker input
KivyMD provides the following date pickers classes for use:
MDTimePickerDialVertical#
Time pickers allow people to enter a specific time value. They’re displayed in dialogs and can be used to select hours, minutes, or periods of time.
They can be used for a wide range of scenarios. Common use cases include:
Setting an alarm
Scheduling a meeting
Time pickers are not ideal for nuanced or granular time selection, such as milliseconds for a stopwatch application.
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.pickers import MDTimePickerDialVertical
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_time_picker()
MDButtonText:
text: "Open time picker"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def show_time_picker(self):
time_picker = MDTimePickerDialVertical()
time_picker.open()
Example().run()
MDTimePickerDialHorizontal#
The clock dial interface adapts to a device’s orientation. In landscape mode, the stacked input and selection options are positioned side-by-side.
def show_time_picker(self):
MDTimePickerDialHorizontal().open()
Note
You must control the orientation of the time picker yourself.
from typing import Literal
from kivy.clock import Clock
from kivy.lang import Builder
from kivy.properties import ObjectProperty
from kivymd.app import MDApp
from kivymd.theming import ThemeManager
from kivymd.uix.pickers import (
MDTimePickerDialHorizontal,
MDTimePickerDialVertical,
)
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release:
app.open_time_picker_horizontal("1", "10") if self.theme_cls.device_orientation == "landscape" else app.open_time_picker_vertical("1", "10")
MDButtonText:
text: "Open time picker"
'''
class Example(MDApp):
ORIENTATION = Literal["portrait", "landscape"]
time_picker_horizontal: MDTimePickerDialHorizontal = ObjectProperty(
allownone=True
)
time_picker_vertical: MDTimePickerDialHorizontal = ObjectProperty(
allownone=True
)
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.bind(device_orientation=self.check_orientation)
return Builder.load_string(KV)
def check_orientation(
self, instance: ThemeManager, orientation: ORIENTATION
):
if orientation == "portrait" and self.time_picker_horizontal:
self.time_picker_horizontal.dismiss()
hour = str(self.time_picker_horizontal.time.hour)
minute = str(self.time_picker_horizontal.time.minute)
Clock.schedule_once(
lambda x: self.open_time_picker_vertical(hour, minute),
0.1,
)
elif orientation == "landscape" and self.time_picker_vertical:
self.time_picker_vertical.dismiss()
hour = str(self.time_picker_vertical.time.hour)
minute = str(self.time_picker_vertical.time.minute)
Clock.schedule_once(
lambda x: self.open_time_picker_horizontal(hour, minute),
0.1,
)
def open_time_picker_horizontal(self, hour, minute):
self.time_picker_vertical = None
self.time_picker_horizontal = MDTimePickerDialHorizontal(
hour=hour, minute=minute
)
self.time_picker_horizontal.open()
def open_time_picker_vertical(self, hour, minute):
self.time_picker_horizontal = None
self.time_picker_vertical = MDTimePickerDialVertical(
hour=hour, minute=minute
)
self.time_picker_vertical.open()
Example().run()
MDTimePickerInput#
Time input pickers allow people to specify a time using keyboard numbers. This input option should be accessible from any other mobile time picker interface by tapping the keyboard icon.
def show_time_picker(self):
MDTimePickerInput().open()
Events#
on_edit event#
from kivy.clock import Clock
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.pickers import MDTimePickerDialVertical, MDTimePickerInput
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDButton:
pos_hint: {'center_x': .5, 'center_y': .5}
on_release: app.show_time_picker_vertical()
MDButtonText:
text: "Open time picker"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
def on_edit_time_picker_input(self, time_picker_input):
time_picker_input.dismiss()
Clock.schedule_once(self.show_time_picker_vertical, 0.2)
def show_time_picker_input(self, *args):
time_picker_input = MDTimePickerInput()
time_picker_input.bind(on_edit=self.on_edit_time_picker_input)
time_picker_input.open()
def on_edit_time_picker_vertical(self, time_picker_vertical):
time_picker_vertical.dismiss()
Clock.schedule_once(self.show_time_picker_input, 0.2)
def show_time_picker_vertical(self, *args):
time_picker_vertical = MDTimePickerDialVertical()
time_picker_vertical.bind(on_edit=self.on_edit_time_picker_vertical)
time_picker_vertical.open()
Example().run()
on_hour_select event#
def on_hour_select(
self, time_picker_vertical: MDTimePickerDialVertical, mode: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"On '{mode}' select",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
def show_time_picker_vertical(self, *args):
time_picker_vertical = MDTimePickerDialVertical()
time_picker_vertical.bind(on_hour_select=self.on_hour_select)
time_picker_vertical.open()
on_minute_select event#
def on_minute_select(
self, time_picker_vertical: MDTimePickerDialVertical, mode: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"On '{mode}' select",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
def show_time_picker_vertical(self, *args):
time_picker_vertical = MDTimePickerDialVertical()
time_picker_vertical.bind(on_minute_select=self.on_minute_select)
time_picker_vertical.open()
on_am_pm event#
def on_am_pm(
self, time_picker_vertical: MDTimePickerDialVertical, am_pm: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"'{am_pm.upper()}' select",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
def show_time_picker_vertical(self, *args):
time_picker_vertical = MDTimePickerDialVertical()
time_picker_vertical.bind(on_am_pm=self.on_am_pm)
time_picker_vertical.open()
on_selector_hour event#
def on_selector_hour(
self, time_picker_vertical: MDTimePickerDialVertical, hour: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"The value of the hour is `{hour}` select",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
def show_time_picker_vertical(self, *args):
time_picker_vertical = MDTimePickerDialVertical()
time_picker_vertical.bind(on_selector_hour=self.on_selector_hour)
time_picker_vertical.open()
on_selector_minute event#
def on_selector_minute(
self, time_picker_vertical: MDTimePickerDialVertical, minute: str
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"The value of the hour is `{minute}` select",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
def show_time_picker_vertical(self, *args):
time_picker_vertical = MDTimePickerDialVertical()
time_picker_vertical.bind(on_selector_minute=self.on_selector_minute)
time_picker_vertical.open()
on_cancel event#
def on_cancel(
self, time_picker_vertical: MDTimePickerDialVertical
):
time_picker_vertical.dismiss()
def show_time_picker_vertical(self, *args):
time_picker_vertical = MDTimePickerDialVertical()
time_picker_vertical.bind(on_cancel=self.on_cancel)
time_picker_vertical.open()
on_ok event#
def on_ok(
self, time_picker_vertical: MDTimePickerDialVertical
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"Time is `{time_picker_vertical.time}`",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
def show_time_picker_vertical(self, *args):
time_picker_vertical = MDTimePickerDialVertical()
time_picker_vertical.bind(on_ok=self.on_ok)
time_picker_vertical.open()
on_time_input event#
def on_time_input(
self,
time_picker_vertical: MDTimePickerInput,
type_time: str,
value: str,
):
MDSnackbar(
MDSnackbarSupportingText(
text=f"The {type_time} value is set to {value}",
),
y=dp(24),
orientation="horizontal",
pos_hint={"center_x": 0.5},
size_hint_x=0.5,
).open()
def show_time_picker_vertical(self, *args):
time_picker_vertical = MDTimePickerInput()
time_picker_vertical.bind(on_time_input=self.on_time_input)
time_picker_vertical.open()
API break#
1.2.0 version#
time_picker_dialog = MDTimePicker()
time_picker_dialog.open()
2.0.0 version#
# time_picker_dialog = MDTimePickerDialVertical()
# time_picker_dialog = MDTimePickerDialHorizontal()
time_picker_dialog = MDTimePickerInput()
time_picker_dialog.open()
API - kivymd.uix.pickers.timepicker.timepicker
#
- class kivymd.uix.pickers.timepicker.timepicker.MDBaseTimePicker(**kwargs)#
Implements the base class of the time picker.
New in version 2.0.0.
For more information, see in the
ThemableBehavior
andMotionTimePickerBehavior
andBoxLayout
and classes documentation.- Events:
on_cancel
Fired when the ‘Cancel’ button is pressed.
on_ok
Fired when the ‘Ok’ button is pressed.
on_dismiss
Fired when a date picker closes.
on_edit
Fired when you click on the date editing icon.
on_hour_select
Fired when the hour input field container is clicked.
on_minute_select
Fired when the minute input field container is clicked.
on_am_pm
Fired when the AP/PM switching elements are pressed.
on_selector_hour
Fired when switching the hour value in the clock face container.
on_selector_minute
Fired when switching the minute value in the clock face container.
- hour#
Current hour.
hour
is anStringProperty
and defaults to ‘12’.
- minute#
Current minute.
minute
is anStringProperty
and defaults to 0.
- am_pm#
Current AM/PM mode.
am_pm
is anOptionProperty
and defaults to ‘am’.
- animation_duration#
Duration of the animations.
animation_duration
is anNumericProperty
and defaults to 0.2.
- animation_transition#
Transition type of the animations.
animation_transition
is anStringProperty
and defaults to ‘out_quad’.
- time#
Returns the current time object.
time
is anObjectProperty
and defaults to None.
- headline_text#
Headline text.
headline_text
is anStringProperty
and defaults to ‘Select time’.
- text_button_ok#
The text of the confirmation button.
text_button_ok
is aStringProperty
and defaults to ‘Ok’.
- text_button_cancel#
The text of the cancel button.
text_button_cancel
is aStringProperty
and defaults to ‘Cancel’.
- radius#
Container radius.
radius
is anVariableListProperty
and defaults to [dp(16), dp(16), dp(16), dp(16)].
- is_open#
Is the date picker dialog open.
is_open
is aBooleanProperty
and defaults to False.
- scrim_color#
Color for scrim in (r, g, b, a) or string format.
scrim_color
is aColorProperty
and defaults to [0, 0, 0, 0.5].
- set_time(time_obj: datetime.time) None #
Manually set time dialog with the specified time.
- on_touch_down(touch)#
Receive a touch down event.
- Parameters:
- touch:
MotionEvent
class Touch received. The touch is in parent coordinates. See
relativelayout
for a discussion on coordinate systems.
- touch:
- Returns:
bool If True, the dispatching of the touch event will stop. If False, the event will continue to be dispatched to the rest of the widget tree.
- class kivymd.uix.pickers.timepicker.timepicker.MDTimePickerInput(**kwargs)#
Implements input time picker.
New in version 2.0.0.
For more information, see in the
CommonElevationBehavior
andMDBaseTimePicker
classes documentation.
- class kivymd.uix.pickers.timepicker.timepicker.MDTimePickerDialVertical(**kwargs)#
Implements vertical time picker.
New in version 2.0.0.
For more information, see in the
CommonElevationBehavior
andMDBaseTimePicker
classes documentation.
- class kivymd.uix.pickers.timepicker.timepicker.MDTimePickerDialHorizontal(**kwargs)#
Implements horizontal time picker.
New in version 2.0.0.
For more information, see in the
CommonElevationBehavior
andMDBaseTimePicker
classes documentation.