Qt6 QML實現(xiàn)DateTimePicker組件的示例代碼
更新時間：2025年12月15日 10:59:04 作者：喵了幾個咪
本文展示了基于Qt6.10實現(xiàn)的DateTimePicker時間日期選擇器組件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
實現(xiàn)代碼
基于QT6.10
// DateTimePicker.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Popup {
id: dateTimePicker
width: 650
height: 480
modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
padding: 0
focus: true
readonly property color colorBackground: "#2b2b2b"
readonly property color colorSurface: "#1e1e1e"
readonly property color colorSurfaceVariant: "#222"
readonly property color colorBorder: "#444"
readonly property color colorBorderLight: "#555"
readonly property color colorPrimary: "#007AFF"
readonly property color colorPrimaryHover: "#0066CC"
readonly property color colorTextPrimary: "white"
readonly property color colorTextSecondary: "#aaa"
readonly property color colorTextTertiary: "#888"
readonly property color colorTextDisabled: "#444"
readonly property color colorHover: "#333"
readonly property color colorHoverLight: "#444"
readonly property color colorHoverDark: "#555"
readonly property color colorScrollbar: "#555"
readonly property color colorScrollbarHover: "#666"
readonly property color colorScrollbarPressed: "#888"
readonly property color colorDisabled: "#555"
property string dateTime: Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss")
property string dateFormat: "yyyy-MM-dd"
property string timeFormat: "hh:mm:ss"
property string minDateTime: ""
property string maxDateTime: ""
property date selectedDate: new Date()
property int selectedHour: 0
property int selectedMinute: 0
property int selectedSecond: 0
property int currentYear: new Date().getFullYear()
property int currentMonth: new Date().getMonth()
property bool hasSelection: false // 選擇狀態(tài)標(biāo)記
// 焦點區(qū)域?qū)傩?
property int focusArea: 0 // 0: 日期, 1: 時, 2: 分, 3: 秒
property int focusedDateIndex: 0 // 日歷格子索引
signal confirmed(date datetime)
background: Rectangle {
color: dateTimePicker.colorBackground
radius: 8
FocusScope {
id: keyboardHandler
anchors.fill: parent
focus: true
Keys.onPressed: function (event) {
if (event.key === Qt.Key_Left) {
if (dateTimePicker.focusArea === 0) {
dateTimePicker.focusedDateIndex = Math.max(0, dateTimePicker.focusedDateIndex - 1)
dateTimePicker.selectedDate = getDateForCell(dateTimePicker.focusedDateIndex)
dateTimePicker.hasSelection = true
} else if (dateTimePicker.focusArea > 0) {
dateTimePicker.focusArea = Math.max(0, dateTimePicker.focusArea - 1)
}
event.accepted = true
} else if (event.key === Qt.Key_Right) {
if (dateTimePicker.focusArea === 0) {
dateTimePicker.focusedDateIndex = Math.min(41, dateTimePicker.focusedDateIndex + 1)
dateTimePicker.selectedDate = getDateForCell(dateTimePicker.focusedDateIndex)
dateTimePicker.hasSelection = true
} else if (dateTimePicker.focusArea < 3) {
dateTimePicker.focusArea = Math.min(3, dateTimePicker.focusArea + 1)
}
event.accepted = true
} else if (event.key === Qt.Key_Up) {
if (dateTimePicker.focusArea === 0) {
dateTimePicker.focusedDateIndex = Math.max(0, dateTimePicker.focusedDateIndex - 7)
dateTimePicker.selectedDate = getDateForCell(dateTimePicker.focusedDateIndex)
dateTimePicker.hasSelection = true
} else {
if (dateTimePicker.focusArea === 1) {
dateTimePicker.selectedHour = (dateTimePicker.selectedHour - 1 + 24) % 24
} else if (dateTimePicker.focusArea === 2) {
dateTimePicker.selectedMinute = (dateTimePicker.selectedMinute - 1 + 60) % 60
} else {
dateTimePicker.selectedSecond = (dateTimePicker.selectedSecond - 1 + 60) % 60
}
dateTimePicker.hasSelection = true
}
event.accepted = true
} else if (event.key === Qt.Key_Down) {
if (dateTimePicker.focusArea === 0) {
dateTimePicker.focusedDateIndex = Math.min(41, dateTimePicker.focusedDateIndex + 7)
dateTimePicker.selectedDate = getDateForCell(dateTimePicker.focusedDateIndex)
dateTimePicker.hasSelection = true
} else {
if (dateTimePicker.focusArea === 1) {
dateTimePicker.selectedHour = (dateTimePicker.selectedHour + 1) % 24
} else if (dateTimePicker.focusArea === 2) {
dateTimePicker.selectedMinute = (dateTimePicker.selectedMinute + 1) % 60
} else {
dateTimePicker.selectedSecond = (dateTimePicker.selectedSecond + 1) % 60
}
dateTimePicker.hasSelection = true
}
event.accepted = true
} else if (event.key === Qt.Key_Tab) {
dateTimePicker.focusArea = (dateTimePicker.focusArea + 1) % 4
event.accepted = true
} else if (event.key === Qt.Key_Backtab) {
dateTimePicker.focusArea = (dateTimePicker.focusArea - 1 + 4) % 4
event.accepted = true
} else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
if (dateTimePicker.hasSelection) {
let dt = new Date(dateTimePicker.selectedDate)
dt.setHours(dateTimePicker.selectedHour)
dt.setMinutes(dateTimePicker.selectedMinute)
dt.setSeconds(dateTimePicker.selectedSecond)
dateTimePicker.confirmed(dt)
dateTimePicker.close()
}
event.accepted = true
} else if (event.key === Qt.Key_Escape) {
dateTimePicker.close()
event.accepted = true
}
}
}
}
ColumnLayout {
anchors.fill: parent
spacing: 0
// 頂部日期時間顯示
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 50
color: dateTimePicker.colorSurface
radius: 8
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 8
color: parent.color
}
Label {
id: dateTimeLabel
anchors.centerIn: parent
color: dateTimePicker.colorPrimary
font.pixelSize: 16
font.bold: true
text: Qt.formatDateTime(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), selectedHour, selectedMinute, selectedSecond), dateFormat + " " + timeFormat)
}
}
// 主內(nèi)容區(qū)域
RowLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 20
spacing: 20
// 左側(cè)日歷區(qū)域
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 12
// 月份導(dǎo)航欄
RowLayout {
Layout.fillWidth: true
spacing: 8
Button {
text: "<<"
Layout.preferredWidth: 40
Layout.preferredHeight: 32
onClicked: {
currentYear -= 1
}
background: Rectangle {
color: parent.hovered ? dateTimePicker.colorHoverDark : dateTimePicker.colorBorder
radius: 4
}
contentItem: Text {
text: parent.text
color: dateTimePicker.colorTextPrimary
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
Button {
text: "<"
Layout.preferredWidth: 40
Layout.preferredHeight: 32
onClicked: {
currentMonth -= 1
if (currentMonth < 0) {
currentMonth = 11
currentYear -= 1
}
}
background: Rectangle {
color: parent.hovered ? dateTimePicker.colorHoverDark : dateTimePicker.colorBorder
radius: 4
}
contentItem: Text {
text: parent.text
color: dateTimePicker.colorTextPrimary
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
Label {
text: Qt.formatDate(new Date(currentYear, currentMonth), "yyyy年 M月")
color: dateTimePicker.colorTextPrimary
font.pixelSize: 16
font.bold: true
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
}
Button {
text: ">"
Layout.preferredWidth: 40
Layout.preferredHeight: 32
onClicked: {
currentMonth += 1
if (currentMonth > 11) {
currentMonth = 0
currentYear += 1
}
}
background: Rectangle {
color: parent.hovered ? dateTimePicker.colorHoverDark : dateTimePicker.colorBorder
radius: 4
}
contentItem: Text {
text: parent.text
color: dateTimePicker.colorTextPrimary
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
Button {
text: ">>"
Layout.preferredWidth: 40
Layout.preferredHeight: 32
onClicked: {
currentYear += 1
}
background: Rectangle {
color: parent.hovered ? dateTimePicker.colorHoverDark : dateTimePicker.colorBorder
radius: 4
}
contentItem: Text {
text: parent.text
color: dateTimePicker.colorTextPrimary
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
}
// 星期標(biāo)題行
GridLayout {
Layout.fillWidth: true
columns: 7
rowSpacing: 0
columnSpacing: 0
Repeater {
model: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
Label {
text: modelData
color: dateTimePicker.colorTextTertiary
font.pixelSize: 12
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
Layout.fillWidth: true
Layout.preferredHeight: 30
}
}
}
// 日期網(wǎng)格
GridLayout {
Layout.fillWidth: true
Layout.fillHeight: true
columns: 7
rowSpacing: 8
columnSpacing: 8
Repeater {
model: 42
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: 40
radius: 4
color: {
if (!isInRange) return dateTimePicker.colorSurfaceVariant
let date = getDateForCell(index)
if (date.getDate() === selectedDate.getDate() && date.getMonth() === selectedDate.getMonth() && date.getFullYear() === selectedDate.getFullYear()) {
return dateTimePicker.colorPrimary
}
return dateMouseArea.containsMouse ? dateTimePicker.colorBorder : "transparent"
}
border.color: {
let date = cellDate
if (date.getDate() === selectedDate.getDate() && date.getMonth() === selectedDate.getMonth() && date.getFullYear() === selectedDate.getFullYear()) {
return "white"
}
return "transparent"
}
border.width: 2
property var cellDate: getDateForCell(index)
property bool isInRange: {
let testDate = new Date(cellDate)
testDate.setHours(selectedHour, selectedMinute, selectedSecond)
return isDateTimeInRange(testDate)
}
Label {
anchors.centerIn: parent
text: parent.cellDate.getDate()
color: {
if (!parent.isInRange) return dateTimePicker.colorTextDisabled
return parent.cellDate.getMonth() === currentMonth ? dateTimePicker.colorTextPrimary : dateTimePicker.colorBorderLight
}
font.pixelSize: 14
}
MouseArea {
id: dateMouseArea
anchors.fill: parent
hoverEnabled: true
enabled: parent.isInRange
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ForbiddenCursor
onClicked: {
if (parent.isInRange) {
let clickedDate = parent.cellDate
selectedDate = clickedDate
// 如果點擊的日期不在當(dāng)前月,自動切換到該月
if (clickedDate.getMonth() !== currentMonth || clickedDate.getFullYear() !== currentYear) {
currentMonth = clickedDate.getMonth()
currentYear = clickedDate.getFullYear()
}
dateTimePicker.hasSelection = true
}
}
}
}
}
}
}
// 分隔線
Rectangle {
Layout.preferredWidth: 1
Layout.fillHeight: true
color: dateTimePicker.colorBorder
}
// 右側(cè)時間選擇區(qū)域
RowLayout {
Layout.preferredWidth: 210
Layout.fillHeight: true
spacing: 8
// 時間列組件
Repeater {
model: [{label: "時", value: selectedHour, max: 24}, {
label: "分", value: selectedMinute, max: 60
}, {label: "秒", value: selectedSecond, max: 60}]
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 8
property string timeLabel: modelData.label
Label {
text: timeLabel
color: dateTimePicker.colorTextTertiary
font.pixelSize: 12
Layout.alignment: Qt.AlignHCenter
}
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: dateTimePicker.colorSurface
radius: 4
border.color: dateTimePicker.colorBorder
border.width: 1
ScrollView {
anchors.fill: parent
anchors.margins: 2
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical: ScrollBar {
policy: ScrollBar.AsNeeded
width: 8
contentItem: Rectangle {
implicitWidth: 8
radius: 4
color: parent.pressed ? dateTimePicker.colorScrollbarPressed : (parent.hovered ? dateTimePicker.colorScrollbarHover : dateTimePicker.colorScrollbar)
}
background: Rectangle {
implicitWidth: 6
color: "transparent"
}
}
ListView {
id: timeListView
model: modelData.max
highlightFollowsCurrentItem: false
highlightMoveDuration: 0
snapMode: ListView.SnapToItem
readonly property string timeType: timeLabel
readonly property int currentValue: {
if (timeType === "時") return dateTimePicker.selectedHour
if (timeType === "分") return dateTimePicker.selectedMinute
return dateTimePicker.selectedSecond
}
function selectTime(value) {
console.log("Selected " + timeListView.timeType + ": " + value + ", hasSelection: " + dateTimePicker.hasSelection)
dateTimePicker.hasSelection = true
if (timeType === "時") {
dateTimePicker.selectedHour = value
} else if (timeType === "分") {
dateTimePicker.selectedMinute = value
} else {
dateTimePicker.selectedSecond = value
}
// 滾動到列表頂部
positionViewAtIndex(value, ListView.Beginning)
}
delegate: Rectangle {
width: timeListView.width
height: 44
radius: 4
color: {
if (index === timeListView.currentValue) return dateTimePicker.colorPrimary
return timeItemMouseArea.containsMouse ? dateTimePicker.colorHover : "transparent"
}
Label {
anchors.centerIn: parent
text: index.toString().padStart(2, '0')
color: index === timeListView.currentValue ? dateTimePicker.colorTextPrimary : dateTimePicker.colorTextSecondary
font.pixelSize: 16
font.bold: index === timeListView.currentValue
}
MouseArea {
id: timeItemMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
timeListView.selectTime(index)
}
}
}
Component.onCompleted: {
positionViewAtIndex(modelData.value, ListView.Beginning)
}
}
}
}
}
}
}
}
// 底部按鈕區(qū)域
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 60
color: dateTimePicker.colorSurface
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 8
color: parent.color
}
RowLayout {
anchors.fill: parent
anchors.margins: 15
spacing: 10
Button {
text: qsTr("今天")
Layout.preferredWidth: 80
Layout.preferredHeight: 36
onClicked: {
var now = new Date()
selectedDate = now
selectedHour = now.getHours()
selectedMinute = now.getMinutes()
selectedSecond = now.getSeconds()
currentYear = now.getFullYear()
currentMonth = now.getMonth()
hasSelection = true
}
background: Rectangle {
color: parent.hovered ? dateTimePicker.colorHoverDark : dateTimePicker.colorBorder
radius: 4
border.color: dateTimePicker.colorBorderLight
border.width: 1
}
contentItem: Text {
text: parent.text
color: dateTimePicker.colorTextSecondary
font.pixelSize: 14
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
Item {
Layout.fillWidth: true
}
Button {
text: qsTr("取消")
Layout.preferredWidth: 80
Layout.preferredHeight: 36
onClicked: dateTimePicker.close()
background: Rectangle {
color: parent.hovered ? dateTimePicker.colorHoverDark : dateTimePicker.colorBorder
radius: 4
border.color: dateTimePicker.colorBorderLight
border.width: 1
}
contentItem: Text {
text: parent.text
color: dateTimePicker.colorTextSecondary
font.pixelSize: 14
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
Button {
text: qsTr("確定")
Layout.preferredWidth: 80
Layout.preferredHeight: 36
enabled: dateTimePicker.hasSelection
onClicked: {
let dt = new Date(selectedDate)
dt.setHours(selectedHour)
dt.setMinutes(selectedMinute)
dt.setSeconds(selectedSecond)
if (isDateTimeInRange(dt)) {
dateTimePicker.dateTime = formatDateTime(dt)
confirmed(dt)
close()
}
}
background: Rectangle {
color: {
if (!parent.enabled) return dateTimePicker.colorDisabled
return parent.hovered ? dateTimePicker.colorPrimaryHover : dateTimePicker.colorPrimary
}
radius: 4
}
contentItem: Text {
text: parent.text
color: parent.enabled ? dateTimePicker.colorTextPrimary : dateTimePicker.colorTextTertiary
font.pixelSize: 14
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
}
}
}
function getDateForCell(index) {
let firstDay = new Date(currentYear, currentMonth, 1)
let dayOfWeek = (firstDay.getDay() + 6) % 7
let cellDate = new Date(currentYear, currentMonth, 1 - dayOfWeek + index)
return cellDate
}
function isDateTimeInRange(date) {
if (minDateTime) {
let minDt = new Date(minDateTime)
if (!isNaN(minDt.getTime()) && date < minDt) {
return false
}
}
if (maxDateTime) {
let maxDt = new Date(maxDateTime)
if (!isNaN(maxDt.getTime()) && date > maxDt) {
return false
}
}
return true
}
function formatDateTime(date) {
return Qt.formatDateTime(date, dateFormat + " " + timeFormat)
}
onDateTimeChanged: {
if (!hasSelection) {
let dt = new Date(dateTime)
if (!isNaN(dt.getTime())) {
selectedDate = dt
selectedHour = dt.getHours()
selectedMinute = dt.getMinutes()
selectedSecond = dt.getSeconds()
currentYear = dt.getFullYear()
currentMonth = dt.getMonth()
}
}
}
Component.onCompleted: {
if (dateTime) {
let dt = new Date(dateTime)
if (!isNaN(dt.getTime())) {
selectedDate = dt
selectedHour = dt.getHours()
selectedMinute = dt.getMinutes()
selectedSecond = dt.getSeconds()
currentYear = dt.getFullYear()
currentMonth = dt.getMonth()
hasSelection = true
}
}
// 初始化焦點位置
let firstDay = new Date(currentYear, currentMonth, 1)
let dayOfWeek = (firstDay.getDay() + 6) % 7
focusedDateIndex = dayOfWeek + selectedDate.getDate() - 1
// 延遲設(shè)置焦點,確保 FocusScope 已完全初始化
Qt.callLater(function () {
keyboardHandler.forceActiveFocus()
})
}
}
使用代碼
DateTimePicker {
id: dateTimePicker
width: 250
height: 40
// 初始值為當(dāng)前日期時間
dateTime: Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss")
// 日期格式
dateFormat: "yyyy-MM-dd"
// 時間格式
timeFormat: "hh:mm:ss"
// 最小可選日期時間
minDateTime: "2023-01-01 00:00:00"
// 最大可選日期時間
maxDateTime: "2024-12-31 23:59:59"
onConfirmed: function (datetime) {
startDateField.text = Qt.formatDateTime(datetime, "yyyy-MM-dd HH:mm")
}
}
顯示效果：
到此這篇關(guān)于Qt6 QML實現(xiàn)DateTimePicker組件的示例代碼的文章就介紹到這了,更多相關(guān)Qt6 QML DateTimePicker內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了C++實現(xiàn)迷宮游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家介紹了使用C語言線性代數(shù)的算法來實現(xiàn)矩陣示例代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-10-10
位圖就是用每一位來存放某種狀態(tài)，適用于海量數(shù)據(jù)，本文就介紹一下C++中bitset位圖介紹及模擬實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2023-07-07
C語言fgetc和fputc函數(shù)用法詳解(以字符形式讀寫文件)
這篇文章主要介紹了C語言fgetc和fputc函數(shù)用法詳解(以字符形式讀寫文件)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了C++實現(xiàn)簡單酒店管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了利用C語言實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
本文通過實例代碼給大家介紹了C++小游戲BrickHit的相關(guān)資料,需要的朋友可以參考下2018-02-02
程序中經(jīng)常需要將一組數(shù)據(jù)元素作為整體管理和使用，需要創(chuàng)建這種元素組，用變量記錄它們，傳進(jìn)傳出函數(shù)等。一組數(shù)據(jù)中包含的元素個數(shù)可能發(fā)生變化，順序表則是將元素順序地存放在一塊連續(xù)的存儲區(qū)里，元素間的順序關(guān)系由它們的存儲順序自然表示2022-03-03
本文主要介紹了Qt實現(xiàn)部件透明及陰影效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了VCPKG安裝和使用教程,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01