diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/time_text_field.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/time_text_field.dart
index 5c6e88a2b937f..40197189cbbfd 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/time_text_field.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/time_text_field.dart
@@ -4,6 +4,7 @@ import 'package:flutter/services.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pbenum.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra_ui/style_widget/text_field.dart';
+import 'package:intl/intl.dart';
 
 const _maxLengthTwelveHour = 8;
 const _maxLengthTwentyFourHour = 5;
@@ -55,6 +56,13 @@ class _TimeTextFieldState extends State<TimeTextField> {
       text = widget.endTimeStr!;
     }
 
+    if (widget.timeFormat == TimeFormatPB.TwelveHour) {
+      final twentyFourHourFormat = DateFormat('HH:mm');
+      final twelveHourFormat = DateFormat('hh:mm a');
+      final date = twentyFourHourFormat.parse(text);
+      text = twelveHourFormat.format(date);
+    }
+
     _focusNode.addListener(_focusNodeListener);
     widget.popoverMutex?.listenOnPopoverChanged(_popoverListener);
   }