QTimeEdit 時間調整元件

QTimeEdit 是 PyQt5 裡的時間調整元件，這篇教學會介紹如何在 PyQt5 視窗裡加入 QTimeEdit 時間調整元件，並實做透過該元件調整時間並將調整的時間顯示出來的簡單應用。

快速導覽：

• 加入 QTimeEdit 時間調整元件
• 時間格式設定
• 時間調整元件常用方法
• 顯示時間調整元件的內容
• 改用 class 的寫法

• PyQt6 版本參考：PyQt6 教學 - QTimeEdit 時間調整元件
• 因為 Google Colab 不支援 PyQt5，所以請使用本機環境 ( 參考：使用 Python 虛擬環境 ) 或使用 Anaconda Jupyter 進行實作 ( 參考：使用 Anaconda )。

加入 QTimeEdit 時間調整元件

建立 PyQt5 視窗物件後，透過 QtWidgets.QTimeEdit(widget) 方法，就能在指定的元件中建立時間調整元件。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

timeedit = QtWidgets.QTimeEdit(Form)
timeedit.setGeometry(20,20,100,30)

Form.show()
sys.exit(app.exec_())

調整時，需要先點擊要調整的時間位置，就可以針對該位置的時間進行調整。

時間格式設定

使用 setDisplayFormat() 方法可以調整時間的顯示格式，預設「上午 時：分」顯示方式的格式為「ap hh:mm」，若調整為「hh:mm:ss」就會變成 24 小時制並且有秒數，如果調整為「hh:mm:ss ap」，則會變成 12 小時制，上午下午放在最後方，下方的程式碼會列出三組不同格式的時間調整元件。

from PyQt5 import QtWidgets, QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

now = QtCore.QTime.currentTime()

t1 = QtWidgets.QTimeEdit(Form)
t1.setGeometry(20,20,120,30)
t1.setDisplayFormat('hh:mm:ss')
t1.setTime(now)

t2 = QtWidgets.QTimeEdit(Form)
t2.setGeometry(20,60,120,30)
t2.setDisplayFormat('hh:mm ap')
t2.setTime(now)

t3 = QtWidgets.QTimeEdit(Form)
t3.setGeometry(20,100,120,30)
t3.setDisplayFormat('ap hh:mm:ss')
t3.setTime(now)

Form.show()
sys.exit(app.exec_())

如果要設定時間調整的範圍，需要搭配 QtCore.QTime(h, m ,s) 方法，下方的程式碼執行後，會將時間調整的範圍限制在 10:00:00～20:00:00。

from PyQt5 import QtWidgets, QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)


now = QtCore.QTime.currentTime()

t1 = QtWidgets.QTimeEdit(Form)
t1.setGeometry(20,20,120,30)
t1.setDisplayFormat('hh:mm:ss')
t1.setTimeRange(QtCore.QTime(10, 00, 00), QtCore.QTime(20, 00, 00))  # 設定時間範圍

Form.show()
sys.exit(app.exec_())

時間調整元件常用方法

下方列出 QTimeEdit 時間調整元件的常用方法：

顯示時間調整元件的內容

運用 timeChanged.connect(fn) 方法，就能在調整時間時，執行特定的函式，下方的程式碼執行後，會透過 QLabel 顯示調整的時間。

from PyQt5 import QtWidgets, QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

label = QtWidgets.QLabel(Form)
label.setGeometry(20,20,120,30)

def show():
    label.setText(t1.time().toString())  # 顯示時間

now = QtCore.QTime.currentTime()   # 取得目前電腦時間

t1 = QtWidgets.QTimeEdit(Form)
t1.setGeometry(140,20,120,30)
t1.setDisplayFormat('hh:mm:ss')
t1.setTime(now)                    # 設定時間
t1.setTimeRange(QtCore.QTime(3, 00, 00), QtCore.QTime(23, 30, 00))
t1.timeChanged.connect(show)

Form.show()
sys.exit(app.exec_())

改用 class 的寫法

上方的程式碼，亦可改用 class 的寫法表示。

from PyQt5 import QtWidgets, QtCore
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.label = QtWidgets.QLabel(self)
        self.label.setGeometry(20,20,120,30)

        now = QtCore.QTime.currentTime()

        self.t1 = QtWidgets.QTimeEdit(self)
        self.t1.setGeometry(140,20,120,30)
        self.t1.setDisplayFormat('hh:mm:ss')
        self.t1.setTime(now)
        self.t1.setTimeRange(QtCore.QTime(3, 00, 00), QtCore.QTime(23, 30, 00))
        self.t1.timeChanged.connect(self.showMsg)

    def showMsg(self):
        self.label.setText(self.t1.time().toString())

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec_())

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～