Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Python 3 tkTimePicker Example to Display TimePicker Widget in Tkinter GUI Desktop App Full Project

Posted on October 26, 2022

Welcome folks today in this blog post we will be displaying the timepicker widget in tkinter using the tktimepicker library. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to install the below library using the pip command as shown below

 

 

pip install tktimepicker

 

 

After installing this library you need to make an app.py file and copy paste the following code

 

 

app.py

 

 

Python
1
2
3
4
5
6
7
8
9
10
11
12
import tkinter as tk
from tktimepicker import AnalogPicker, AnalogThemes
# note: you can also make use of mouse wheel or keyboard to scroll or enter the spin timepicker
root = tk.Tk()
 
time_picker = AnalogPicker(root)
time_picker.pack(expand=True, fill="both")
 
# theme = AnalogThemes(time_picker)
# theme.setDracula()
 
root.mainloop()

 

 

As you can see we are importing the tktimepicker library at the very top and then we are importing the AnalogPicker and Analog Themes. Various themes are supported by this library which are shown below

 

  1. clock timepicker
  2. old-spin timepicker
  3. modern-spin timepicker

 

 

As you can see we are setting the analogPicker class and then we are setting the dracula as the theme of the timepicker. Now if you execute the python file as shown below

 

 

python app.py

 

 

 

 

As you can see we can change the time of the hours and minutes and we can manually enter the time as well and also we can select the am and pm also.

 

 

Timepicker Themes

 

 

There are various themes available for this time picker which is shown below.

 

 

NavyBlue

NavyBlue

Dracula

Dracula

purple

Purple

Old-spin timepicker

old-spin timepicker

 

 

AnalogTime Picker Full Example

 

 

Now we will be seeing the analog clock timepicker example with the user having the capability to change the time as shown below

 

 

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import tkinter as tk
 
from tktimepicker import AnalogPicker, AnalogThemes, constants
 
 
def updateTime(time):
    time_lbl.configure(text="{}:{} {}".format(*time)) # remove 3rd flower bracket in case of 24 hrs time
 
 
def get_time():
 
    top = tk.Toplevel(root)
 
    time_picker = AnalogPicker(top, type=constants.HOURS12)
    time_picker.pack(expand=True, fill="both")
 
    theme = AnalogThemes(time_picker)
    # theme.setDracula()
    # theme.setNavyBlue()
    theme.setPurple()
    ok_btn = tk.Button(top, text="ok", command=lambda: updateTime(time_picker.time()))
    ok_btn.pack()
 
 
root = tk.Tk()
 
time = ()
 
time_lbl = tk.Label(root, text="Time:")
time_lbl.pack()
 
time_btn = tk.Button(root, text="Get Time", command=get_time)
time_btn.pack()
 
root.mainloop()

 

 

 

 

 

As you can see we have the simple button to get the current time and when we click the button a new popup window appears and we see here we will set the hours and minutes and also select am or pm.

 

 

Adding the Spin Time Picker Widget in Tkinter

 

 

Now for the second example we have the spin time picker widget to pick the time. This widget is also part of the library as shown below

 

 

app.py

 

 

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import tkinter as tk
from tktimepicker import SpinTimePickerModern, SpinTimePickerOld
from tktimepicker import constants
 
 
def updateTime(time):
    time_lbl.configure(text="{}:{}:{}".format(*time)) # if you are using 24 hours, remove the 3rd flower bracket its for period
 
 
def get_time():
 
    top = tk.Toplevel(root)
 
    time_picker = SpinTimePickerModern(top)
    # time_picker = SpinTimePickerOld(top)
    time_picker.addAll(constants.HOURS24)  # adds hours clock, minutes and period
    time_picker.configureAll(bg="#404040", height=1, fg="#ffffff", font=("Times", 16), hoverbg="#404040",
                            hovercolor="#d73333", clickedbg="#2e2d2d", clickedcolor="#d73333")
    time_picker.configure_separator(bg="#404040", fg="#ffffff")
    # time_picker.addHours12()
    # time_picker.addHours24()
    # time_picker.addMinutes()
 
    time_picker.pack(expand=True, fill="both")
 
    ok_btn = tk.Button(top, text="ok", command=lambda: updateTime(time_picker.time()))
    ok_btn.pack()
 
 
root = tk.Tk()
 
time = ()
 
time_lbl = tk.Label(root, text="Time:")
time_lbl.pack()
 
time_btn = tk.Button(root, text="Get Time", command=get_time)
time_btn.pack()
 
root.mainloop()

 

 

 

Recent Posts

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme