diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/DataPickerDialog.gif b/zh-cn/application-dev/reference/arkui-ts/figures/DataPickerDialog.gif
deleted file mode 100644
index f16653bb3fb1c69d1ecbe2702a676d7200a1111f..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/DataPickerDialog.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/DatePickerApi10.gif b/zh-cn/application-dev/reference/arkui-ts/figures/DatePickerApi10.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ffd1635eb7a7606bf53f9c6d0c82a0ec976105a4
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/DatePickerApi10.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/DatePickerDialogApi10.gif b/zh-cn/application-dev/reference/arkui-ts/figures/DatePickerDialogApi10.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3bb002293fda4f63a45602a466ad2cf66450f66c
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/DatePickerDialogApi10.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/datePicker.gif b/zh-cn/application-dev/reference/arkui-ts/figures/datePicker.gif
deleted file mode 100644
index f9855aa32e2ffa7b2f72304fc8396f0fb4307cc4..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/datePicker.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
index 5f862b2dea620699f3888cf90851b1760c07595b..6ce743a0f15883c6f04e11dd085cbb825ad5587f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
@@ -84,6 +84,9 @@ struct DatePickerExample {
         end: new Date('2100-1-1'),
         selected: this.selectedDate
       })
+        .disappearTextStyle({color: Color.Gray, font: {size: '16fp', weight: FontWeight.Bold}})
+        .textStyle({color: '#ff182431', font: {size: '18fp', weight: FontWeight.Normal}})
+        .selectedTextStyle({color: '#ff0000FF', font: {size: '26fp', weight: FontWeight.Regular}})
         .lunar(this.isLunar)
         .onChange((value: DatePickerResult) => {
           this.selectedDate.setFullYear(value.year, value.month, value.day)
@@ -95,4 +98,4 @@ struct DatePickerExample {
 }
 ```
 
-![datePicker](figures/datePicker.gif)
\ No newline at end of file
+![datePicker](figures/DatePickerApi10.gif)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
index a4f99a55b4d78f8320e78a889a89b064f332645b..d5be648cdb9f74ba8e20b79200d4f3162a9f726f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
@@ -51,6 +51,11 @@ struct DatePickerDialogExample {
             start: new Date("2000-1-1"),
             end: new Date("2100-12-31"),
             selected: this.selectedDate,
+            showTime:true,
+            useMilitaryTime:false,
+            disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}},
+            textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}},
+            selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}},
             onAccept: (value: DatePickerResult) => {
               // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
               this.selectedDate.setFullYear(value.year, value.month, value.day)
@@ -73,6 +78,9 @@ struct DatePickerDialogExample {
             end: new Date("2100-12-31"),
             selected: this.selectedDate,
             lunar: true,
+            disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}},
+            textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}},
+            selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}},
             onAccept: (value: DatePickerResult) => {
               this.selectedDate.setFullYear(value.year, value.month, value.day)
               console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
@@ -90,4 +98,4 @@ struct DatePickerDialogExample {
 }
 ```
 
-![DataPickerDialog](figures/DataPickerDialog.gif)
+![DataPickerDialog](figures/DatePickerDialogApi10.gif)