diff --git a/example/example_en_US.ts b/example/example_en_US.ts
index 2bf9ad36..bd858af1 100644
--- a/example/example_en_US.ts
+++ b/example/example_en_US.ts
@@ -1149,7 +1149,8 @@ Updated content:
     <name>T_DatePicker</name>
     <message>
         <location filename="qml/page/T_DatePicker.qml" line="10"/>
-        <source>TimePicker</source>
+        <source>DatePicker</source>
+        <oldsource>TimePicker</oldsource>
         <translation type="unfinished"></translation>
     </message>
     <message>
diff --git a/example/example_zh_CN.ts b/example/example_zh_CN.ts
index 4decb53f..d2ba204a 100644
--- a/example/example_zh_CN.ts
+++ b/example/example_zh_CN.ts
@@ -1153,8 +1153,8 @@ Updated content:
     <name>T_DatePicker</name>
     <message>
         <location filename="qml/page/T_DatePicker.qml" line="10"/>
-        <source>TimePicker</source>
-        <translation type="unfinished">时间选择器</translation>
+        <source>DatePicker</source>
+        <translation type="unfinished">日期选择器</translation>
     </message>
     <message>
         <location filename="qml/page/T_DatePicker.qml" line="23"/>
diff --git a/example/qml/page/T_DatePicker.qml b/example/qml/page/T_DatePicker.qml
index e65752aa..a6474522 100644
--- a/example/qml/page/T_DatePicker.qml
+++ b/example/qml/page/T_DatePicker.qml
@@ -7,7 +7,7 @@ import "../component"
 
 FluScrollablePage{
 
-    title: qsTr("TimePicker")
+    title: qsTr("DatePicker")
 
     FluArea{
         Layout.fillWidth: true
diff --git a/src/Qt5/imports/FluentUI/Controls/FluButton.qml b/src/Qt5/imports/FluentUI/Controls/FluButton.qml
index acf9f7c6..14870543 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluButton.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluButton.qml
@@ -8,6 +8,7 @@ Button {
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+    property color dividerColor: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(233/255,233/255,233/255,1)
     property color textColor: {
         if(FluTheme.dark){
             if(!enabled){
@@ -40,7 +41,7 @@ Button {
     background: Rectangle{
         implicitWidth: 28
         implicitHeight: 28
-        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
+        border.color: control.dividerColor
         border.width: 1
         radius: 4
         color:{
diff --git a/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml b/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml
index e20a5164..90ed6dcb 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml
@@ -5,35 +5,22 @@ import QtQuick.Window 2.15
 import FluentUI 1.0
 import Qt.labs.calendar 1.0
 
-Rectangle {
-    property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property string text: qsTr("Pick a date")
+FluButton {
+    text: {
+        if(control.current){
+            return control.current.toLocaleDateString(FluApp.locale,"yyyy/M/d")
+        }
+        return qsTr("Pick a date")
+    }
     property date from: new Date(1924, 0, 1)
     property date to: new Date(2124, 11, 31)
     property var current
     signal accepted()
     id:control
-    color: {
-        if(mouse_area.containsMouse){
-            return hoverColor
-        }
-        return normalColor
-    }
-    height: 30
-    width: 120
-    radius: 4
-    border.width: 1
-    border.color: dividerColor
-    MouseArea{
-        id:mouse_area
-        hoverEnabled: true
-        anchors.fill: parent
-        onClicked: {
-            popup.showPopup()
-        }
+    onClicked: {
+        popup.showPopup()
     }
+    rightPadding: 36
     CalendarModel {
         id:calender_model
         from: control.from
@@ -54,28 +41,10 @@ Rectangle {
         signal previousButton
         property point yearRing : Qt.point(0,0)
     }
-    FluText{
-        id:text_date
-        anchors{
-            left: parent.left
-            right: parent.right
-            rightMargin: 30
-            top: parent.top
-            bottom: parent.bottom
-        }
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-        text:{
-            if(control.current){
-                return control.current.toLocaleDateString(FluApp.locale,"yyyy/M/d")
-            }
-            return control.text
-        }
-    }
     FluIcon{
         iconSource: FluentIcons.Calendar
         iconSize: 14
-        iconColor: text_date.color
+        iconColor: control.textColor
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
diff --git a/src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml b/src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml
index 8522baf5..7d4fca32 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml
@@ -4,10 +4,8 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 
-Rectangle {
-    property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+
+FluButton {
     property bool showYear: true
     property var current
     property string yearText: qsTr("Year")
@@ -17,17 +15,8 @@ Rectangle {
     property string okText: qsTr("OK")
     signal accepted()
     id:control
-    color: {
-        if(mouse_area.containsMouse){
-            return hoverColor
-        }
-        return normalColor
-    }
-    height: 30
-    width: 300
-    radius: 4
-    border.width: 1
-    border.color: dividerColor
+    implicitHeight: 30
+    implicitWidth: 300
     Component.onCompleted: {
         if(current){
             const now = current;
@@ -46,20 +35,15 @@ Rectangle {
         property var rowData: ["","",""]
         visible: false
     }
-    MouseArea{
-        id:mouse_area
-        hoverEnabled: true
-        anchors.fill: parent
-        onClicked: {
-            popup.showPopup()
-        }
+    onClicked: {
+        popup.showPopup()
     }
     Rectangle{
         id:divider_1
         width: 1
         x:  parent.width/3
         height: parent.height
-        color: dividerColor
+        color: control.dividerColor
         visible: showYear
     }
     Rectangle{
@@ -67,7 +51,7 @@ Rectangle {
         width: 1
         x: showYear ? parent.width*2/3 :  parent.width/2
         height: parent.height
-        color: dividerColor
+        color: control.dividerColor
     }
     FluText{
         id:text_year
@@ -81,6 +65,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text:control.yearText
+        color: control.textColor
     }
     FluText{
         id:text_month
@@ -93,6 +78,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text:control.monthText
+        color: control.textColor
     }
     FluText{
         id:text_day
@@ -105,6 +91,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text:control.dayText
+        color: control.textColor
     }
     Menu{
         id:popup
@@ -247,7 +234,7 @@ Rectangle {
                     Rectangle{
                         width: 1
                         height: parent.height
-                        color: dividerColor
+                        color: control.dividerColor
                     }
                     ListView{
                         id:list_view_2
@@ -269,7 +256,7 @@ Rectangle {
                     Rectangle{
                         width: 1
                         height: parent.height
-                        color: dividerColor
+                        color: control.dividerColor
                     }
                     ListView{
                         id:list_view_3
@@ -294,7 +281,7 @@ Rectangle {
                     width: parent.width
                     height: 1
                     anchors.top: layout_content.bottom
-                    color: dividerColor
+                    color: control.dividerColor
                 }
                 Rectangle{
                     id:layout_actions
diff --git a/src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml b/src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml
index 8ac4e2c6..d111bf05 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml
@@ -4,32 +4,20 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 
-Rectangle {
-    property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+FluButton {
     property int hourFormat: FluTimePickerType.H
     property int isH: hourFormat === FluTimePickerType.H
     property var current
-    property string amText: "上午"
-    property string pmText: "下午"
-    property string hourText: "时"
-    property string minuteText: "分"
-    property string cancelText: "取消"
-    property string okText: "确定"
+    property string amText: qsTr("AM")
+    property string pmText: qsTr("PM")
+    property string hourText: qsTr("Hour")
+    property string minuteText: qsTr("Minute")
+    property string cancelText: qsTr("Cancel")
+    property string okText: qsTr("OK")
     signal accepted()
     id:control
-    color: {
-        if(mouse_area.containsMouse){
-            return hoverColor
-        }
-        return normalColor
-    }
-    height: 30
-    width: 300
-    radius: 4
-    border.width: 1
-    border.color: dividerColor
+    implicitHeight: 30
+    implicitWidth: 300
     Component.onCompleted: {
         if(current){
             var now = current;
@@ -62,16 +50,9 @@ Rectangle {
         property bool changeFlag: true
         property var rowData: ["","",""]
         visible: false
-
-
     }
-    MouseArea{
-        id: mouse_area
-        hoverEnabled: true
-        anchors.fill: parent
-        onClicked: {
-            popup.showPopup()
-        }
+    onClicked: {
+        popup.showPopup()
     }
     Rectangle{
         id: divider_1
@@ -99,6 +80,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text: control.hourText
+        color: control.textColor
     }
     FluText{
         id: text_minute
@@ -111,6 +93,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text: control.minuteText
+        color: control.textColor
     }
     FluText{
         id:text_ampm
@@ -124,6 +107,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text: "%1/%2".arg(control.amText).arg(control.pmText)
+        color: control.textColor
     }
     Menu{
         id:popup
@@ -254,7 +238,7 @@ Rectangle {
                     Rectangle{
                         width: 1
                         height: parent.height
-                        color: dividerColor
+                        color: control.dividerColor
                     }
                     ListView{
                         id:list_view_2
@@ -277,7 +261,7 @@ Rectangle {
                     Rectangle{
                         width: 1
                         height: parent.height
-                        color: dividerColor
+                        color: control.dividerColor
                         visible: isH
                     }
                     ListView{
@@ -305,7 +289,7 @@ Rectangle {
                     width: parent.width
                     height: 1
                     anchors.top: layout_content.bottom
-                    color: dividerColor
+                    color: control.dividerColor
                 }
                 Rectangle{
                     id:layout_actions
diff --git a/src/Qt6/imports/FluentUI/Controls/FluButton.qml b/src/Qt6/imports/FluentUI/Controls/FluButton.qml
index dffe4d61..a50736c6 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluButton.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluButton.qml
@@ -9,6 +9,7 @@ Button {
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+    property color dividerColor: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(233/255,233/255,233/255,1)
     property color textColor: {
         if(FluTheme.dark){
             if(!enabled){
@@ -41,7 +42,7 @@ Button {
     background: Rectangle{
         implicitWidth: 28
         implicitHeight: 28
-        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
+        border.color: control.dividerColor
         border.width: 1
         radius: 4
         color:{
diff --git a/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml b/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml
index dbd9d503..9790a3e0 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml
@@ -4,35 +4,22 @@ import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
 
-Rectangle {
-    property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property string text: qsTr("Pick a date")
+FluButton {
+    text: {
+        if(control.current){
+            return control.current.toLocaleDateString(FluApp.locale,"yyyy/M/d")
+        }
+        return qsTr("Pick a date")
+    }
     property date from: new Date(1924, 0, 1)
     property date to: new Date(2124, 11, 31)
     property var current
     signal accepted()
     id:control
-    color: {
-        if(mouse_area.containsMouse){
-            return hoverColor
-        }
-        return normalColor
-    }
-    height: 30
-    width: 120
-    radius: 4
-    border.width: 1
-    border.color: dividerColor
-    MouseArea{
-        id:mouse_area
-        hoverEnabled: true
-        anchors.fill: parent
-        onClicked: {
-            popup.showPopup()
-        }
+    onClicked: {
+        popup.showPopup()
     }
+    rightPadding: 36
     CalendarModel {
         id:calender_model
         from: control.from
@@ -53,28 +40,10 @@ Rectangle {
         signal previousButton
         property point yearRing : Qt.point(0,0)
     }
-    FluText{
-        id:text_date
-        anchors{
-            left: parent.left
-            right: parent.right
-            rightMargin: 30
-            top: parent.top
-            bottom: parent.bottom
-        }
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-        text:{
-            if(control.current){
-                return control.current.toLocaleDateString(FluApp.locale,"yyyy/M/d")
-            }
-            return control.text
-        }
-    }
     FluIcon{
         iconSource: FluentIcons.Calendar
         iconSize: 14
-        iconColor: text_date.color
+        iconColor: control.textColor
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
diff --git a/src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml b/src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml
index abfcf47d..a9d46d8d 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml
@@ -4,10 +4,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
 
-Rectangle {
-    property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+FluButton {
     property bool showYear: true
     property var current
     property string yearText: qsTr("Year")
@@ -17,17 +14,8 @@ Rectangle {
     property string okText: qsTr("OK")
     signal accepted()
     id:control
-    color: {
-        if(mouse_area.containsMouse){
-            return hoverColor
-        }
-        return normalColor
-    }
-    height: 30
-    width: 300
-    radius: 4
-    border.width: 1
-    border.color: dividerColor
+    implicitHeight: 30
+    implicitWidth: 300
     Component.onCompleted: {
         if(current){
             const now = current;
@@ -46,20 +34,15 @@ Rectangle {
         property var rowData: ["","",""]
         visible: false
     }
-    MouseArea{
-        id:mouse_area
-        hoverEnabled: true
-        anchors.fill: parent
-        onClicked: {
-            popup.showPopup()
-        }
+    onClicked: {
+        popup.showPopup()
     }
     Rectangle{
         id:divider_1
         width: 1
         x:  parent.width/3
         height: parent.height
-        color: dividerColor
+        color: control.dividerColor
         visible: showYear
     }
     Rectangle{
@@ -67,7 +50,7 @@ Rectangle {
         width: 1
         x: showYear ? parent.width*2/3 :  parent.width/2
         height: parent.height
-        color: dividerColor
+        color: control.dividerColor
     }
     FluText{
         id:text_year
@@ -81,6 +64,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text:control.yearText
+        color: control.textColor
     }
     FluText{
         id:text_month
@@ -93,6 +77,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text:control.monthText
+        color: control.textColor
     }
     FluText{
         id:text_day
@@ -105,6 +90,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text:control.dayText
+        color: control.textColor
     }
     Menu{
         id:popup
@@ -247,7 +233,7 @@ Rectangle {
                     Rectangle{
                         width: 1
                         height: parent.height
-                        color: dividerColor
+                        color: control.dividerColor
                     }
                     ListView{
                         id:list_view_2
@@ -269,7 +255,7 @@ Rectangle {
                     Rectangle{
                         width: 1
                         height: parent.height
-                        color: dividerColor
+                        color: control.dividerColor
                     }
                     ListView{
                         id:list_view_3
@@ -294,7 +280,7 @@ Rectangle {
                     width: parent.width
                     height: 1
                     anchors.top: layout_content.bottom
-                    color: dividerColor
+                    color: control.dividerColor
                 }
                 Rectangle{
                     id:layout_actions
diff --git a/src/Qt6/imports/FluentUI/Controls/FluTimePicker.qml b/src/Qt6/imports/FluentUI/Controls/FluTimePicker.qml
index f34b6dd6..5cdace5a 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluTimePicker.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluTimePicker.qml
@@ -4,10 +4,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
 
-Rectangle {
-    property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+FluButton {
     property int hourFormat: FluTimePickerType.H
     property int isH: hourFormat === FluTimePickerType.H
     property var current
@@ -19,17 +16,8 @@ Rectangle {
     property string okText: "确定"
     signal accepted()
     id:control
-    color: {
-        if(mouse_area.containsMouse){
-            return hoverColor
-        }
-        return normalColor
-    }
-    height: 30
-    width: 300
-    radius: 4
-    border.width: 1
-    border.color: dividerColor
+    implicitHeight: 30
+    implicitWidth: 300
     Component.onCompleted: {
         if(current){
             var now = current;
@@ -62,16 +50,9 @@ Rectangle {
         property bool changeFlag: true
         property var rowData: ["","",""]
         visible: false
-
-
     }
-    MouseArea{
-        id: mouse_area
-        hoverEnabled: true
-        anchors.fill: parent
-        onClicked: {
-            popup.showPopup()
-        }
+    onClicked: {
+        popup.showPopup()
     }
     Rectangle{
         id: divider_1
@@ -99,6 +80,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text: control.hourText
+        color: control.textColor
     }
     FluText{
         id: text_minute
@@ -111,6 +93,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text: control.minuteText
+        color: control.textColor
     }
     FluText{
         id:text_ampm
@@ -124,6 +107,7 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         text: "%1/%2".arg(control.amText).arg(control.pmText)
+        color: control.textColor
     }
     Menu{
         id:popup
@@ -254,7 +238,7 @@ Rectangle {
                     Rectangle{
                         width: 1
                         height: parent.height
-                        color: dividerColor
+                        color: control.dividerColor
                     }
                     ListView{
                         id:list_view_2
@@ -277,7 +261,7 @@ Rectangle {
                     Rectangle{
                         width: 1
                         height: parent.height
-                        color: dividerColor
+                        color: control.dividerColor
                         visible: isH
                     }
                     ListView{
@@ -305,7 +289,7 @@ Rectangle {
                     width: parent.width
                     height: 1
                     anchors.top: layout_content.bottom
-                    color: dividerColor
+                    color: control.dividerColor
                 }
                 Rectangle{
                     id:layout_actions
diff --git a/src/fluentui_en_US.ts b/src/fluentui_en_US.ts
index d2163b1d..a6118a50 100644
--- a/src/fluentui_en_US.ts
+++ b/src/fluentui_en_US.ts
@@ -64,8 +64,8 @@
 <context>
     <name>FluCalendarPicker</name>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml" line="12"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml" line="11"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml" line="13"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml" line="12"/>
         <source>Pick a date</source>
         <translation type="unfinished"></translation>
     </message>
@@ -94,32 +94,32 @@
 <context>
     <name>FluDatePicker</name>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="13"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="13"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="11"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="10"/>
         <source>Year</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="14"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="14"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="12"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="11"/>
         <source>Month</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="15"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="15"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="13"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="12"/>
         <source>Day</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="16"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="16"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="14"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="13"/>
         <source>Cancel</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="17"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="17"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="15"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="14"/>
         <source>OK</source>
         <translation type="unfinished"></translation>
     </message>
@@ -208,6 +208,39 @@
         <translation type="unfinished"></translation>
     </message>
 </context>
+<context>
+    <name>FluTimePicker</name>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="11"/>
+        <source>AM</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="12"/>
+        <source>PM</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="13"/>
+        <source>Hour</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="14"/>
+        <source>Minute</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="15"/>
+        <source>Cancel</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="16"/>
+        <source>OK</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>FluTour</name>
     <message>
@@ -232,8 +265,8 @@
 <context>
     <name>FluWindow</name>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="269"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="268"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="259"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="258"/>
         <source>Loading...</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/src/fluentui_zh_CN.ts b/src/fluentui_zh_CN.ts
index 8adbb1ef..8dc35f5b 100644
--- a/src/fluentui_zh_CN.ts
+++ b/src/fluentui_zh_CN.ts
@@ -68,8 +68,8 @@
         <translation type="obsolete">请选择日期</translation>
     </message>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml" line="12"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml" line="11"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml" line="13"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml" line="12"/>
         <source>Pick a date</source>
         <translation type="unfinished">选择日期</translation>
     </message>
@@ -98,32 +98,32 @@
 <context>
     <name>FluDatePicker</name>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="13"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="13"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="11"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="10"/>
         <source>Year</source>
         <translation type="unfinished">年</translation>
     </message>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="14"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="14"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="12"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="11"/>
         <source>Month</source>
         <translation type="unfinished">月</translation>
     </message>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="15"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="15"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="13"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="12"/>
         <source>Day</source>
         <translation type="unfinished">日</translation>
     </message>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="16"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="16"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="14"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="13"/>
         <source>Cancel</source>
         <translation type="unfinished">取消</translation>
     </message>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="17"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="17"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluDatePicker.qml" line="15"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluDatePicker.qml" line="14"/>
         <source>OK</source>
         <translation type="unfinished">确定</translation>
     </message>
@@ -212,6 +212,39 @@
         <translation type="unfinished">全选</translation>
     </message>
 </context>
+<context>
+    <name>FluTimePicker</name>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="11"/>
+        <source>AM</source>
+        <translation type="unfinished">上午</translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="12"/>
+        <source>PM</source>
+        <translation type="unfinished">下午</translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="13"/>
+        <source>Hour</source>
+        <translation type="unfinished">时</translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="14"/>
+        <source>Minute</source>
+        <translation type="unfinished">分</translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="15"/>
+        <source>Cancel</source>
+        <translation type="unfinished">取消</translation>
+    </message>
+    <message>
+        <location filename="Qt5/imports/FluentUI/Controls/FluTimePicker.qml" line="16"/>
+        <source>OK</source>
+        <translation type="unfinished">确定</translation>
+    </message>
+</context>
 <context>
     <name>FluTour</name>
     <message>
@@ -236,8 +269,8 @@
 <context>
     <name>FluWindow</name>
     <message>
-        <location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="269"/>
-        <location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="268"/>
+        <location filename="Qt5/imports/FluentUI/Controls/FluWindow.qml" line="259"/>
+        <location filename="Qt6/imports/FluentUI/Controls/FluWindow.qml" line="258"/>
         <source>Loading...</source>
         <translation type="unfinished">加载中...</translation>
     </message>