diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/timePicker.gif b/zh-cn/application-dev/reference/arkui-ts/figures/timePicker.gif
index dcfe87d505109e349d426eb8ca772c78cfd9b127..c6d16e85f36ad248877ce15acb307638ef8fca4c 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/timePicker.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/timePicker.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
index 880745d3a22d29eb0cca6e2536e9f9d6846d5992..c61cc30671edef0b4733d95063e132949f0b97d9 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
@@ -76,6 +76,9 @@ struct TimePickerExample {
           this.selectedTime.setHours(value.hour, value.minute)
           console.info('select current date is: ' + JSON.stringify(value))
         })
+        .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}})
+        .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}})
+        .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}})
     }.width('100%')
   }
 }