Create time Picker Using KivyMD

In this article, we are going to learn how to create a time picker using kivyMD in Python programming language.

Create time Picker Using KivyMD

In addition to the Kivy framework is KivyMD. A set of Material Design widgets for use with the Kivy GUI framework which is used to create mobile applications. The Kivy framework is comparable, however, it offers a more appealing GUI. To install the kivymd package execute the below command in the command prompt or terminal.

pip install kivymd

Method 1

In this method, we are going to create a time picker using Python’s kivymd package without using Kv language. Let’s see the stepwise implementation of the code.

Step 1: Importing packages

Python3

# Importing Required Packages
from datetime import datetime
from kivymd.app import MDApp
from kivymd.uix.screen import Screen
from kivymd.uix.picker import MDTimePicker

Step 2: First, we will define our main app class. In which we will be using Screen() to call our layout. Before we show the time picker we need to set a default value in our time picker so to do that we will be using strptime() to convert string to time format. Now we will be calling time picker using MDTimePicker() and to set default time we will use set_time() and pass default time in it. To display the time picker we will be using open() and return the screen.

Python3

# app class
class MainApp(MDApp):

    # defining app
    def build(self):
        # calling screen
        screen = Screen()

        # converting string to time format
        previous_time = datetime.strptime("12:00:00", '%H:%M:%S').time()

        # calling MDTimePicker
        t = MDTimePicker()

        # setting up default time
        t.set_time(previous_time)

        # opens Time picker
        t.open()

        # returning screen
        return screen

# running app
MainApp().run()

Complete code:

Python3

# importing packages
from datetime import datetime
from kivymd.app import MDApp
from kivymd.uix.screen import Screen
from kivymd.uix.pickers import MDTimePicker

# app class
class MainApp(MDApp):

    # defining app
    def build(self):
        # calling screen
        screen = Screen()

        # converting string to time format
        previous_time = datetime.strptime("12:00:00", '%H:%M:%S').time()

        # calling MDTimePicker
        t = MDTimePicker()

        # setting up default time
        t.set_time(previous_time)

        # opens Time picker
        t.open()

        # returning screen
        return screen


# running app
MainApp().run()

Output:

Method 2

In this method, we are going to use Kv language along with the python code to create the time picker. Let’s see the stepwise implementation of the code.

Step 1. Firstly, we will need Builder, MDTimePicker, MDApp from kivymd, and the datetime package. so, let’s import them.

Note: We will not be importing MDFloatLayout and MDRaisedButton because we are designing our screen using the Kv language. 

Python3

# importing packages
from kivy.lang import Builder
from datetime import datetime
from kivymd.app import MDApp
from kivymd.uix.picker import MDTimePicker

Step 2. We will be designing our layout using the Kv language. To do so, we will declare the Layout widget class called MDFloatLayout and then the child widget class called MDRaisedButton. We won’t pass any parameters to MDFloatLayout and keep it default.

For MDRaisedButton we will pass its location in x,y coordinate form. center_x is used for the x coordinate whereas center_y is used for the y coordinate. Now we will be creating a trigger event to show the time picker which can be done using on_release and we will pass our time picker function in it which we will be defining in our main function.

Python3

# writing kv lang
KV = '''
# declaring layout
MDFloatLayout:

    # creating a button
    MDFillRoundFlatButton:
        text: "Set Time"
        pos_hint: {'center_x': .5, 'center_y': .5}

        # creating button event
        # this will trigger time_picker
        on_release: app.show_time_picker()
'''

Step 3. To run the Kv file we will be using load_string() and pass our Kv language in it. So we will define a function for this named build() and on-call it will load Kv and return the screen. run() is used to run the class and it does not require any parameters.

We will be defining another function to show the time picker. First, we will get time to set as the default value for our time picker, to do so we will be using strptime() to convert string into time format using datetime package and store it in a variable for future use. Now we will be using MDTimePicker() to get a time picker. To set the default time in the time picker we use set_time() and pass the default time variable we defined a few couples of lines before and at last we will use open() function to display the time picker.

Python3

# main app class
class Main(MDApp):
    def build(self):
        return Builder.load_string(KV)

    # creating a function for time_picker
    def show_time_picker(self):
        # converting string to time format
        default_time = datetime.strptime("12:00:00", '%H:%M:%S').time()
        # gets time picker
        t = MDTimePicker()
        # Setting the default time for time picker
        t.set_time(default_time)
        # opens time picker
        t.open()

# running app
Main().run()

Complete Code:

Python3

# importing packages
from kivy.lang import Builder
from datetime import datetime
from kivymd.app import MDApp
from kivymd.uix.pickers import MDTimePicker

# writing kv lang
KV = '''
# declaring layout
MDFloatLayout:

    # creating a button
    MDFillRoundFlatButton:
        text: "Set Time"
        pos_hint: {'center_x': .5, 'center_y': .5}

        # creating button event
        # this will trigger time_picker
        on_release: app.time_picker()
'''

# main app class
class Main(MDApp):
    def build(self):
        return Builder.load_string(KV)

    # creating a function for time_picker
    def time_picker(self):
        # converting string to time format
        default_time = datetime.strptime("12:00:00", '%H:%M:%S').time()
        # gets time picker
        t = MDTimePicker()
        # Setting the default time for time picker
        t.set_time(default_time)
        # opens time picker
        t.open()

# running app
Main().run()

Output: