diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
index c58465c..c4b3216 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
@@ -9,6 +9,7 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <TimePicker />
+        <TimePicker Classes="ClearButton" />
         <TimePicker MinuteIncrement="15" />
         <TimePicker ClockIdentifier="24HourClock" />
         <TimePicker ClockIdentifier="12HourClock" IsEnabled="False" />
diff --git a/src/Semi.Avalonia/Controls/DatePicker.axaml b/src/Semi.Avalonia/Controls/DatePicker.axaml
index c137fc1..a27f881 100644
--- a/src/Semi.Avalonia/Controls/DatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/DatePicker.axaml
@@ -228,10 +228,10 @@
                         <Button
                             Name="ClearButton"
                             Grid.Column="1"
+                            Margin="0,0,8,0"
                             Command="{Binding $parent[DatePicker].Clear}"
                             Content="{DynamicResource TextBoxClearButtonData}"
                             IsVisible="False"
-                            Margin="0 0 8 0"
                             Theme="{DynamicResource ButtonInputInnerButton}" />
                     </Grid>
                 </DataValidationErrors>
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
index 8041da1..b85e616 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -139,11 +139,17 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <DataValidationErrors>
-                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                    <Grid
+                        Name="LayoutRoot"
+                        Margin="{TemplateBinding Padding}"
+                        ColumnDefinitions="*, Auto">
                         <Button
                             x:Name="PART_FlyoutButton"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
                             Width="242"
                             MinWidth="242"
+                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Background="{TemplateBinding Background}"
@@ -154,7 +160,6 @@
                             DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
                             Foreground="{TemplateBinding Foreground}"
                             IsEnabled="{TemplateBinding IsEnabled}"
-                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
                             Theme="{StaticResource DateTimePickerFlyoutButton}">
                             <Grid ColumnDefinitions="*, Auto">
                                 <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
@@ -234,16 +239,36 @@
 
                         <Popup
                             Name="PART_Popup"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
                             IsLightDismissEnabled="True"
                             Placement="Bottom"
                             PlacementTarget="{TemplateBinding}"
                             WindowManagerAddShadowHint="False">
                             <TimePickerPresenter Name="PART_PickerPresenter" />
                         </Popup>
+
+                        <Button
+                            Name="ClearButton"
+                            Grid.Column="1"
+                            Margin="0,0,8,0"
+                            Command="{Binding $parent[TimePicker].Clear}"
+                            Content="{DynamicResource TextBoxClearButtonData}"
+                            IsVisible="False"
+                            Theme="{DynamicResource ButtonInputInnerButton}" />
                     </Grid>
                 </DataValidationErrors>
             </ControlTemplate>
         </Setter>
+        
+        <Style Selector="^.clearButton:pointerover, ^.ClearButton:pointerover">
+            <Style Selector="^:not(:hasnotime) /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+            <Style Selector="^:not(:hasnotime) /template/ PathIcon#PART_Icon">
+                <Setter Property="Opacity" Value="0" />
+            </Style>
+        </Style>
 
         <Style Selector="^:disabled /template/ PathIcon#PART_Icon">
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonDisabledIconForeground}" />