Pickers

See also

Material Design spec, Time picker

Material Design spec, Date picker

Includes date, time and color picker.

KivyMD provides the following classes for use:

• MDTimePicker

• MDDatePicker

• MDThemePicker

MDTimePicker

Usage

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.picker 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):
        return Builder.load_string(KV)

    def show_time_picker(self):
        '''Open time picker dialog.'''

        time_dialog = MDTimePicker()
        time_dialog.open()


Test().run()

Binding method returning set time

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 set_time method of the class.

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 MDTimePicker class, see the documentation in the BaseDialogPicker class.

MDDatePicker

Warning

The widget is under testing. Therefore, we would be grateful if you would let us know about the bugs found.

Usage

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.picker import MDDatePicker

KV = '''
MDFloatLayout:

    MDToolbar:
        title: "MDDatePicker"
        pos_hint: {"top": 1}
        elevation: 10

    MDRaisedButton:
        text: "Open time picker"
        pos_hint: {'center_x': .5, 'center_y': .5}
        on_release: app.show_date_picker()
'''


class Test(MDApp):
    def build(self):
        return Builder.load_string(KV)

    def on_save(self, instance, value, date_range):
        '''
        Events called when the "OK" dialog box button is clicked.

        :type instance: <kivymd.uix.picker.MDDatePicker object>;

        :param value: selected date;
        :type value: <class 'datetime.date'>;

        :param date_range: list of 'datetime.date' objects in the selected range;
        :type date_range: <class 'list'>;
        '''

        print(instance, value, date_range)

    def on_cancel(self, instance, value):
        '''Events called when the "CANCEL" dialog box button is clicked.'''

    def show_date_picker(self):
        date_dialog = MDDatePicker()
        date_dialog.bind(on_save=self.on_save, on_cancel=self.on_cancel)
        date_dialog.open()


Test().run()

Open date dialog with the specified date

def show_date_picker(self):
    date_dialog = MDDatePicker(year=1983, month=4, day=12)
    date_dialog.open()

You can set the time interval from and to the set date. All days of the week that are not included in this range will have the status disabled.

def show_date_picker(self):
    date_dialog = MDDatePicker(
        min_date=datetime.date(2021, 2, 15),
        max_date=datetime.date(2021, 3, 27),
    )
    date_dialog.open()

The range of available dates can be changed in the picker dialog:

Select year

Warning

The list of years when opening is not automatically set to the current year.

You can set the range of years using the min_year and max_year attributes:

def show_date_picker(self):
    date_dialog = MDDatePicker(min_year=2021, max_year=2030)
    date_dialog.open()

Set and select a date range

def show_date_picker(self):
    date_dialog = MDDatePicker(mode="range")
    date_dialog.open()

MDThemePicker

def show_theme_picker(self):
    theme_dialog = MDThemePicker()
    theme_dialog.open()

API - kivymd.uix.picker

class kivymd.uix.picker.BaseDialogPicker(**kwargs)

Base class for MDDatePicker and MDTimePicker classes.

Events

on_save

Events called when the “OK” dialog box button is clicked.

on_cancel

Events called when the “CANCEL” dialog box button is clicked.

title_input

Dialog title fot input date.

title_input is an StringProperty and defaults to INPUT DATE.

title

Dialog title fot select date.

title is an StringProperty and defaults to SELECT DATE.

radius

Radius list for the four corners of the dialog.

radius is an ListProperty and defaults to [7, 7, 7, 7].

primary_color

Background color of toolbar.

MDDatePicker(primary_color=get_color_from_hex("#72225b")

primary_color is an ColorProperty and defaults to None.

accent_color

Background color of calendar/clock face.

MDDatePicker(
    primary_color=get_color_from_hex("#72225b"),
    accent_color=get_color_from_hex("#5d1a4a"),
)

accent_color is an ColorProperty and defaults to None.

selector_color

Background color of the selected day of the month or hour.

MDDatePicker(
    primary_color=get_color_from_hex("#72225b"),
    accent_color=get_color_from_hex("#5d1a4a"),
    selector_color=get_color_from_hex("#e93f39"),
)

selector_color is an ColorProperty and defaults to None.

text_toolbar_color

Color of labels for text on a toolbar.

MDDatePicker(
    primary_color=get_color_from_hex("#72225b"),
    accent_color=get_color_from_hex("#5d1a4a"),
    selector_color=get_color_from_hex("#e93f39"),
    text_toolbar_color=get_color_from_hex("#cccccc"),
)

text_toolbar_color is an ColorProperty and defaults to None.

text_color

Color of text labels in calendar/clock face.

MDDatePicker(
    primary_color=get_color_from_hex("#72225b"),
    accent_color=get_color_from_hex("#5d1a4a"),
    selector_color=get_color_from_hex("#e93f39"),
    text_toolbar_color=get_color_from_hex("#cccccc"),
    text_color=("#ffffff"),
)

text_color is an ColorProperty and defaults to None.

text_current_color

Color of the text of the current day of the month/hour.

MDDatePicker(
    primary_color=get_color_from_hex("#72225b"),
    accent_color=get_color_from_hex("#5d1a4a"),
    selector_color=get_color_from_hex("#e93f39"),
    text_toolbar_color=get_color_from_hex("#cccccc"),
    text_color=("#ffffff"),
    text_current_color=get_color_from_hex("#e93f39"),
)

text_current_color is an ColorProperty and defaults to None.

text_button_color

Text button color.

MDDatePicker(
    primary_color=get_color_from_hex("#72225b"),
    accent_color=get_color_from_hex("#5d1a4a"),
    selector_color=get_color_from_hex("#e93f39"),
    text_toolbar_color=get_color_from_hex("#cccccc"),
    text_color=("#ffffff"),
    text_current_color=get_color_from_hex("#e93f39"),
    text_button_color=(1, 1, 1, .5),
)

text_button_color is an ColorProperty and defaults to None.

input_field_background_color

Background color of input fields.

MDDatePicker(
    primary_color=get_color_from_hex("#72225b"),
    accent_color=get_color_from_hex("#5d1a4a"),
    selector_color=get_color_from_hex("#e93f39"),
    text_toolbar_color=get_color_from_hex("#cccccc"),
    text_color=("#ffffff"),
    text_current_color=get_color_from_hex("#e93f39"),
    input_field_background_color=(1, 1, 1, 0.2),
)

input_field_background_color is an ColorProperty and defaults to None.

input_field_text_color

Text color of input fields.

Background color of input fields.

MDDatePicker(
    primary_color=get_color_from_hex("#72225b"),
    accent_color=get_color_from_hex("#5d1a4a"),
    selector_color=get_color_from_hex("#e93f39"),
    text_toolbar_color=get_color_from_hex("#cccccc"),
    text_color=("#ffffff"),
    text_current_color=get_color_from_hex("#e93f39"),
    input_field_background_color=(1, 1, 1, 0.2),
    input_field_text_color=(1, 1, 1, 1),
)

input_field_text_color is an ColorProperty and defaults to None.

font_name

Font name for dialog window text.

MDDatePicker(
    primary_color=get_color_from_hex("#72225b"),
    accent_color=get_color_from_hex("#5d1a4a"),
    selector_color=get_color_from_hex("#e93f39"),
    text_toolbar_color=get_color_from_hex("#cccccc"),
    text_color=("#ffffff"),
    text_current_color=get_color_from_hex("#e93f39"),
    input_field_background_color=(1, 1, 1, 0.2),
    input_field_text_color=(1, 1, 1, 1),
    font_name="Weather.ttf",

)

font_name is an StringProperty and defaults to ‘Roboto’.

on_save(self, *args)

Events called when the “OK” dialog box button is clicked.

on_cancel(self, *args)

Events called when the “CANCEL” dialog box button is clicked.

class kivymd.uix.picker.MDDatePicker(year=None, month=None, day=None, firstweekday=0, **kwargs)

Base class for MDDatePicker and MDTimePicker classes.

Events

on_save

Events called when the “OK” dialog box button is clicked.

on_cancel

Events called when the “CANCEL” dialog box button is clicked.

text_weekday_color

Text color of weekday names.

text_weekday_color is an ColorProperty and defaults to None.

day

The day of the month to be opened by default. If not specified, the current number will be used.

day is an NumericProperty and defaults to 0.

month

The number of month to be opened by default. If not specified, the current number will be used.

month is an NumericProperty and defaults to 0.

year

The year of month to be opened by default. If not specified, the current number will be used.

year is an NumericProperty and defaults to 0.

min_year

The year of month to be opened by default. If not specified, the current number will be used.

min_year is an NumericProperty and defaults to 1914.

max_year

The year of month to be opened by default. If not specified, the current number will be used.

max_year is an NumericProperty and defaults to 2121.

mode

Dialog type:’picker’ type allows you to select one date;

‘range’ type allows to set a range of dates from which the user can select a date.

Available options are: [‘picker’, ‘range’].

mode is an OptionProperty and defaults to picker.

min_date

The minimum value of the date range for the ‘mode’ parameter. Must be an object <class ‘datetime.date’>.

min_date is an ObjectProperty and defaults to None.

max_date

The minimum value of the date range for the ‘mode’ parameter. Must be an object <class ‘datetime.date’>.

max_date is an ObjectProperty and defaults to None.

date_range_text_error

Error text that will be shown on the screen in the form of a toast if the minimum date range exceeds the maximum.

date_range_text_error is an StringProperty and defaults to ‘Error date range’.

sel_year

sel_month

sel_day

on_device_orientation(self, instance, value)

transformation_from_dialog_select_year(self)

transformation_to_dialog_select_year(self)

transformation_to_dialog_input_date(self)

transformation_from_dialog_input_date(self, interval)

compare_date_range(self)

update_calendar_for_date_range(self)

update_text_full_date(self, list_date)

Updates the title of the week, month and number day name in an open date input dialog.

update_calendar(self, year, month)

get_field(self)

Creates and returns a text field object used to enter dates.

get_date_range(self)

set_text_full_date(self, year, month, day, orientation)

Returns a string of type “Tue, Feb 2” or “Tue, Feb 2” for a date

choose and a string like “Feb 15 - Mar 23” or “Feb 15,

Mar 23” for

a date range.

set_selected_widget(self, widget)

set_month_day(self, day)

set_position_to_current_year(self)

generate_list_widgets_years(self)

generate_list_widgets_days(self)

change_month(self, operation)

Called when “chevron-left” and “chevron-right” buttons are pressed. Switches the calendar to the previous/next month.

class kivymd.uix.picker.MDTimePicker(**kwargs)

Base class for MDDatePicker and MDTimePicker classes.

Events

on_save

Events called when the “OK” dialog box button is clicked.

on_cancel

Events called when the “CANCEL” dialog box button is clicked.

hour

Current hour

hour is an StringProperty and defaults to ‘12’.

minute

Current minute

minute is an StringProperty and defaults to 0.

minute_radius

Radius of the minute input field.

minute_radius is an ListProperty and defaults to [dp(5),].

hour_radius

Radius of the hour input field.

hour_radius is an ListProperty and defaults to [dp(5),].

am_pm_radius

Radius of the AM/PM selector.

am_pm_radius is an NumericProperty and defaults to dp(5).

am_pm_border_width

Width of the AM/PM selector’s borders.

am_pm_border_width is an NumericProperty and defaults to dp(1).

am_pm

Current AM/PM mode.

am_pm is an OptionProperty and defaults to ‘am’.

animation_duration

Duration of the animations.

animation_duration is an NumericProperty and defaults to 0.2.

animation_transition

Transition type of the animations.

animation_transition is an StringProperty and defaults to ‘out_quad’.

time

Returns the current time object.

time is an ObjectProperty and defaults to None.

set_time(self, time_obj)

Manually set time dialog with the specified time.

get_state(self)

Returns the current state of TimePicker. Can be one of portrait, landscape or input.

class kivymd.uix.picker.MDThemePicker(**kwargs)

ModalView class. See module documentation for more information.

Events

on_pre_open:

Fired before the ModalView is opened. When this event is fired ModalView is not yet added to window.

on_open:

Fired when the ModalView is opened.

on_pre_dismiss:

Fired before the ModalView is closed.

on_dismiss:

Fired when the ModalView is closed. If the callback returns True, the dismiss will be canceled.

Changed in version 1.11.0: Added events on_pre_open and on_pre_dismiss.

Changed in version 2.0.0: Added property ‘overlay_color’.

on_open(self)

on_tab_switch(self, instance_tabs, instance_tab, instance_tab_label, tab_text)