diff --git a/demo/Ursa.Demo/Pages/TimePickerDemo.axaml b/demo/Ursa.Demo/Pages/TimePickerDemo.axaml
index 3e1b4c9..7a8c8bf 100644
--- a/demo/Ursa.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/TimePickerDemo.axaml
@@ -11,21 +11,36 @@
     <StackPanel HorizontalAlignment="Left">
         <ToggleSwitch Name="needConfirm" Content="Need Confirm" />
         <TextBlock Text="{Binding #picker.SelectedTime}" />
+        <TextBox
+            Name="displayFormat"
+            Width="300"
+            InnerLeftContent="Display Format"
+            Text="HH 时 mm 分 ss 秒" />
+        <TextBox
+            Name="panelFormat"
+            Width="300"
+            InnerLeftContent="Panel Format"
+            Text="tt HH mm ss" />
         <u:TimePicker
             Name="picker"
             Width="200"
             HorizontalAlignment="Left"
+            DisplayFormat="{Binding #displayFormat.Text}"
             NeedConfirmation="{Binding #needConfirm.IsChecked}"
-            PanelFormat="hh mm tt" />
+            PanelFormat="{Binding #panelFormat.Text}" />
+
         <u:TimePicker
             Width="300"
-            Classes="ClearButton"
-            DisplayFormat="HH 时 mm 分 ss 秒"
-            PanelFormat="tt HH mm ss"
             HorizontalAlignment="Left"
-            NeedConfirmation="True"
+            Classes="ClearButton"
+            DisplayFormat="{Binding #displayFormat.Text}"
             InnerLeftContent="时刻"
-            InnerRightContent="截止" />
-        <u:TimeRangePicker Width="300"></u:TimeRangePicker>
+            InnerRightContent="截止"
+            NeedConfirmation="True"
+            PanelFormat="{Binding #panelFormat.Text}" />
+        <u:TimeRangePicker
+            Width="300"
+            DisplayFormat="{Binding #displayFormat.Text}"
+            PanelFormat="{Binding #panelFormat.Text}" />
     </StackPanel>
 </UserControl>
diff --git a/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml b/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
index bc67c4e..b95972e 100644
--- a/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
@@ -25,7 +25,7 @@
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
                             CornerRadius="{TemplateBinding CornerRadius}" />
-                        <Grid ColumnDefinitions="*, Auto, * Auto">
+                        <Grid ColumnDefinitions="*, Auto, * Auto" Name="PART_Grid">
                             <TextBox
                                 Name="{x:Static u:TimeRangePicker.PART_StartTextBox}"
                                 Grid.Column="0"
@@ -75,6 +75,8 @@
                         <Popup
                             Name="{x:Static iri:PartNames.PART_Popup}"
                             IsLightDismissEnabled="True"
+                            OverlayDismissEventPassThrough="True"
+                            OverlayInputPassThroughElement="{Binding ElementName=PART_Grid}"
                             IsOpen="{TemplateBinding IsDropdownOpen,
                                                      Mode=TwoWay}"
                             Placement="BottomEdgeAlignedLeft"
diff --git a/src/Ursa/Controls/DateTimePicker/TimePicker.cs b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
index 983e3d2..1383bac 100644
--- a/src/Ursa/Controls/DateTimePicker/TimePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
@@ -39,6 +39,16 @@ public class TimePicker : TimePickerBase, IClearControl
     {
         SelectedTimeProperty.Changed.AddClassHandler<TimePicker, TimeSpan?>((picker, args) =>
             picker.OnSelectionChanged(args));
+        DisplayFormatProperty.Changed.AddClassHandler<TimePicker, string?>((picker, args) => picker.OnDisplayFormatChanged(args));
+    }
+
+    private void OnDisplayFormatChanged(AvaloniaPropertyChangedEventArgs<string?> args)
+    {
+        if (_textBox is null) return;
+        var time = SelectedTime;
+        var date = new DateTime( 1, 1, 1, time.Value.Hours, time.Value.Minutes, time.Value.Seconds);
+        var text = date.ToString(DisplayFormat);
+        _textBox.Text = text;
     }
 
     public string? Watermark
diff --git a/src/Ursa/Controls/DateTimePicker/TimePickerPresenter.cs b/src/Ursa/Controls/DateTimePicker/TimePickerPresenter.cs
index dedf751..044c2f6 100644
--- a/src/Ursa/Controls/DateTimePicker/TimePickerPresenter.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimePickerPresenter.cs
@@ -130,42 +130,49 @@ public class TimePickerPresenter : TemplatedControl
     private void OnPanelFormatChanged(AvaloniaPropertyChangedEventArgs<string> args)
     {
         var format = args.NewValue.Value;
-
         UpdatePanelLayout(format);
     }
 
-    private void UpdatePanelLayout(string panelFormat)
+    private void UpdatePanelLayout(string? panelFormat)
     {
+        if (panelFormat is null) return;
         var parts = panelFormat.Split(new[] { ' ', '-', ':' }, StringSplitOptions.RemoveEmptyEntries);
         var panels = new List<Control?>();
         foreach (var part in parts)
         {
             if (part.Length < 1) continue;
-            if ((part.Contains('h') || part.Contains('H')) && !panels.Contains(_hourScrollPanel))
+            try
             {
-                panels.Add(_hourScrollPanel);
-                _use12Clock = part.Contains('h');
-                _hourSelector?.SetValue(DateTimePickerPanel.ItemFormatProperty, part.ToLower());
-                if (_hourSelector is not null)
+                if ((part.Contains('h') || part.Contains('H')) && !panels.Contains(_hourScrollPanel))
                 {
-                    _hourSelector.MaximumValue = _use12Clock ? 12 : 23;
-                    _hourSelector.MinimumValue = _use12Clock ? 1: 0;
+                    panels.Add(_hourScrollPanel);
+                    _use12Clock = part.Contains('h');
+                    _hourSelector?.SetValue(DateTimePickerPanel.ItemFormatProperty, part.ToLower());
+                    if (_hourSelector is not null)
+                    {
+                        _hourSelector.MaximumValue = _use12Clock ? 12 : 23;
+                        _hourSelector.MinimumValue = _use12Clock ? 1 : 0;
+                    }
+                }
+                else if (part[0] == 'm' && !panels.Contains(_minuteSelector))
+                {
+                    panels.Add(_minuteScrollPanel);
+                    _minuteSelector?.SetValue(DateTimePickerPanel.ItemFormatProperty, part);
+                }
+                else if (part[0] == 's' && !panels.Contains(_secondScrollPanel))
+                {
+                    panels.Add(_secondScrollPanel);
+                    _secondSelector?.SetValue(DateTimePickerPanel.ItemFormatProperty, part.Replace('s', 'm'));
+                }
+                else if (part[0] == 't' && !panels.Contains(_ampmScrollPanel))
+                {
+                    panels.Add(_ampmScrollPanel);
+                    _ampmSelector?.SetValue(DateTimePickerPanel.ItemFormatProperty, part);
                 }
             }
-            else if (part[0] == 'm' && !panels.Contains(_minuteSelector))
+            catch
             {
-                panels.Add(_minuteScrollPanel);
-                _minuteSelector?.SetValue(DateTimePickerPanel.ItemFormatProperty, part);
-            }
-            else if (part[0] == 's' && !panels.Contains(_secondScrollPanel))
-            {
-                panels.Add(_secondScrollPanel);
-                _secondSelector?.SetValue(DateTimePickerPanel.ItemFormatProperty, part.Replace('s', 'm'));
-            }
-            else if (part[0] == 't' && !panels.Contains(_ampmScrollPanel))
-            {
-                panels.Add(_ampmScrollPanel);
-                _ampmSelector?.SetValue(DateTimePickerPanel.ItemFormatProperty, part);
+                
             }
         }