diff --git a/demo/Ursa.Demo/Pages/DatePickerDemo.axaml b/demo/Ursa.Demo/Pages/DatePickerDemo.axaml
index 28ae7c8..448cbca 100644
--- a/demo/Ursa.Demo/Pages/DatePickerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/DatePickerDemo.axaml
@@ -1,24 +1,28 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:u="https://irihi.tech/ursa"
-             xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
-             x:DataType="viewModels:DatePickerDemoViewModel"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Ursa.Demo.Pages.DatePickerDemo">
+<UserControl
+    x:Class="Ursa.Demo.Pages.DatePickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="viewModels:DatePickerDemoViewModel"
+    mc:Ignorable="d">
     <StackPanel Margin="20" HorizontalAlignment="Left">
-        <u:Form>
-            <u:DatePicker Width="200" u:FormItem.Label="_Test"/>
-            <TextBox Width="200" u:FormItem.Label="_West"/>
-        </u:Form>
-        <u:CalendarView DateSelected="CalendarView_OnOnDateSelected" DatePreviewed="CalendarView_OnOnDatePreviewed"/>
-        <TextBlock Text="{Binding #singlePicker.SelectedDate}" ></TextBlock>
-        <u:DatePicker Name="singlePicker" Width="200" Classes="ClearButton" />
-        <u:DateRangePicker Width="300" DisplayFormat="yyyyMMdd" Classes="ClearButton" />
-        
-        <TextBlock Text="Binding"></TextBlock>
-        <u:DatePicker Width="200" SelectedDate="{Binding SelectedDate, Mode=TwoWay}"/>
-        <u:DateRangePicker Width="300" SelectedStartDate="{Binding StartDate}" SelectedEndDate="{Binding EndDate}"/>
+        <TextBox Name="format" InnerLeftContent="Display Format" />
+        <TextBlock Text="Default" />
+        <u:DatePicker Width="200" DisplayFormat="{Binding #format.Text}" />
+        <TextBlock Text="Binding" />
+        <u:DatePicker
+            Width="200"
+            DisplayFormat="{Binding #format.Text}"
+            SelectedDate="{Binding SelectedDate, Mode=TwoWay}" />
+        <TextBlock Text="Clear Button" />
+        <u:DatePicker
+            Name="singlePicker"
+            Width="200"
+            Classes="ClearButton" />
     </StackPanel>
-</UserControl>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Ursa.Demo/Pages/DatePickerDemo.axaml.cs b/demo/Ursa.Demo/Pages/DatePickerDemo.axaml.cs
index 74214c7..4bb0d49 100644
--- a/demo/Ursa.Demo/Pages/DatePickerDemo.axaml.cs
+++ b/demo/Ursa.Demo/Pages/DatePickerDemo.axaml.cs
@@ -10,14 +10,4 @@ public partial class DatePickerDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void CalendarView_OnOnDateSelected(object? _, CalendarDayButtonEventArgs e)
-    {
-        Debug.WriteLine("Pressed: "+ e.Date?.ToLongDateString());
-    }
-
-    private void CalendarView_OnOnDatePreviewed(object? _, CalendarDayButtonEventArgs e)
-    {
-        Debug.WriteLine("Hovered: "+e.Date?.ToLongDateString());
-    }
 }
\ No newline at end of file
diff --git a/demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml b/demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml
new file mode 100644
index 0000000..f4f2071
--- /dev/null
+++ b/demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml
@@ -0,0 +1,37 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.DateRangePickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="viewModels:DateRangePickerDemoViewModel"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left">
+        <TextBox
+            Name="format"
+            Text="yyyy-MM-dd"
+            Watermark="Display Format" />
+        <TextBlock Text="Default" />
+        <u:DateRangePicker
+            Width="360"
+            DisplayFormat="{Binding #format.Text}"
+            SelectedEndDate="{Binding EndDate}"
+            SelectedStartDate="{Binding StartDate}" />
+
+        <TextBlock Text="Clear Button" />
+        <u:DateRangePicker
+            Width="360"
+            Classes="ClearButton"
+            DisplayFormat="{Binding #format.Text}" />
+        <TextBlock Text="Initialized with Binding" />
+        <u:DateRangePicker
+            Width="360"
+            DisplayFormat="{Binding #format.Text}"
+            SelectedEndDate="{Binding EndDate}"
+            SelectedStartDate="{Binding StartDate}" />
+    </StackPanel>
+</UserControl>
diff --git a/demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml.cs b/demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml.cs
new file mode 100644
index 0000000..56acc29
--- /dev/null
+++ b/demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml.cs
@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Ursa.Demo.Pages;
+
+public partial class DateRangePickerDemo : UserControl
+{
+    public DateRangePickerDemo()
+    {
+        InitializeComponent();
+    }
+}
\ No newline at end of file
diff --git a/demo/Ursa.Demo/Pages/TimePickerDemo.axaml b/demo/Ursa.Demo/Pages/TimePickerDemo.axaml
index 4b849fd..9ffc7fe 100644
--- a/demo/Ursa.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/TimePickerDemo.axaml
@@ -43,10 +43,6 @@
             InnerRightContent="截止"
             NeedConfirmation="True"
             PanelFormat="{Binding #panelFormat.Text}" />
-        <u:TimeRangePicker
-            Width="300"
-            DisplayFormat="{Binding #displayFormat.Text}"
-            PanelFormat="{Binding #panelFormat.Text}" />
         
         <TextBlock Text="Binding"/>
         <u:TimePicker
@@ -55,11 +51,5 @@
             SelectedTime="{Binding Time}"
             DisplayFormat="{Binding #displayFormat.Text}"
             PanelFormat="{Binding #panelFormat.Text}" />
-        <u:TimeRangePicker
-            Width="300"
-            StartTime="{Binding StartTime}"
-            EndTime="{Binding EndTime}"
-            DisplayFormat="{Binding #displayFormat.Text}"
-            PanelFormat="{Binding #panelFormat.Text}" />
     </StackPanel>
 </UserControl>
diff --git a/demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml b/demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml
new file mode 100644
index 0000000..7d98aec
--- /dev/null
+++ b/demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml
@@ -0,0 +1,44 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
+             xmlns:u="https://irihi.tech/ursa"
+             mc:Ignorable="d" d:DesignWidth="800"
+             d:DesignHeight="450"
+             x:DataType="viewModels:TimeRangePickerDemoViewModel"
+             x:Class="Ursa.Demo.Pages.TimeRangePickerDemo">
+    <StackPanel HorizontalAlignment="Left">
+        <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" />
+        
+        <TextBlock Text="Default"/>
+        <u:TimeRangePicker
+            Width="300"
+            DisplayFormat="{Binding #displayFormat.Text}"
+            PanelFormat="{Binding #panelFormat.Text}" />
+        
+        <TextBlock Text="Initialized by Binding"/>
+        <u:TimeRangePicker
+            Width="300"
+            StartTime="{Binding StartTime}"
+            EndTime="{Binding EndTime}"
+            DisplayFormat="{Binding #displayFormat.Text}"
+            PanelFormat="{Binding #panelFormat.Text}" />
+        
+        <TextBlock Text="Clear Button"/>
+        <u:TimeRangePicker
+            Width="300"
+            Classes="ClearButton"
+            DisplayFormat="{Binding #displayFormat.Text}"
+            PanelFormat="{Binding #panelFormat.Text}" />
+    </StackPanel>
+</UserControl>
diff --git a/demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml.cs b/demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml.cs
new file mode 100644
index 0000000..564a507
--- /dev/null
+++ b/demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml.cs
@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Ursa.Demo.Pages;
+
+public partial class TimeRangePickerDemo : UserControl
+{
+    public TimeRangePickerDemo()
+    {
+        InitializeComponent();
+    }
+}
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/DatePickerDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/DatePickerDemoViewModel.cs
index 693ab0f..a1bf3c4 100644
--- a/demo/Ursa.Demo/ViewModels/DatePickerDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/DatePickerDemoViewModel.cs
@@ -7,22 +7,9 @@ namespace Ursa.Demo.ViewModels;
 public partial class DatePickerDemoViewModel: ObservableObject
 {
     [ObservableProperty] private DateTime? _selectedDate;
-    [ObservableProperty] private DateTime? _startDate;
-    [ObservableProperty] private DateTime? _endDate;
 
     public DatePickerDemoViewModel()
     {
         SelectedDate = DateTime.Today;
-        StartDate = DateTime.Today;
-        EndDate = DateTime.Today.AddDays(7);
-    }
-
-    protected override void OnPropertyChanged(PropertyChangedEventArgs e)
-    {
-        base.OnPropertyChanged(e);
-        if (e.PropertyName == nameof(SelectedDate))
-        {
-            
-        }
     }
 }
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/DateRangePickerDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/DateRangePickerDemoViewModel.cs
new file mode 100644
index 0000000..1bcaa2c
--- /dev/null
+++ b/demo/Ursa.Demo/ViewModels/DateRangePickerDemoViewModel.cs
@@ -0,0 +1,16 @@
+using System;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class DateRangePickerDemoViewModel: ObservableObject
+{
+    [ObservableProperty] private DateTime? _startDate;
+    [ObservableProperty] private DateTime? _endDate;
+
+    public DateRangePickerDemoViewModel()
+    {
+        StartDate = DateTime.Today;
+        EndDate = DateTime.Today.AddDays(7);
+    }
+}
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
index 2abaaf4..161df53 100644
--- a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
@@ -41,6 +41,7 @@ public partial class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyClassInput => new ClassInputDemoViewModel(),
             MenuKeys.MenuKeyClock => new ClockDemoViewModel(),
             MenuKeys.MenuKeyDatePicker => new DatePickerDemoViewModel(),
+            MenuKeys.MenuKeyDateRangePicker => new DateRangePickerDemoViewModel(),
             MenuKeys.MenuKeyDateTimePicker => new DateTimePickerDemoViewModel(),
             MenuKeys.MenuKeyDialog => new DialogDemoViewModel(),
             MenuKeys.MenuKeyDisableContainer => new DisableContainerDemoViewModel(),
@@ -75,6 +76,7 @@ public partial class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyTimeBox => new TimeBoxDemoViewModel(),
             MenuKeys.MenuKeyTimeline => new TimelineDemoViewModel(),
             MenuKeys.MenuKeyTimePicker => new TimePickerDemoViewModel(),
+            MenuKeys.MenuKeyTimeRangePicker => new TimeRangePickerDemoViewModel(),
             MenuKeys.MenuKeyToast => new ToastDemoViewModel(),
             MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),
             MenuKeys.MenuKeyTreeComboBox => new TreeComboBoxDemoViewModel(),
diff --git a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
index b044516..d1a92a4 100644
--- a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
@@ -53,9 +53,11 @@ public class MenuViewModel : ViewModelBase
                 MenuHeader = "Date & Time", Children = new ObservableCollection<MenuItemViewModel>
                 {
                     new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
+                    new() { MenuHeader = "Date Range Picker", Key = MenuKeys.MenuKeyDateRangePicker },
                     new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
                     new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
-                    new() { MenuHeader = "TimePicker", Key = MenuKeys.MenuKeyTimePicker },
+                    new() { MenuHeader = "Time Picker", Key = MenuKeys.MenuKeyTimePicker },
+                    new() { MenuHeader = "Time Range Picker", Key = MenuKeys.MenuKeyTimeRangePicker },
                     new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock }
                 }
             },
@@ -108,6 +110,7 @@ public static class MenuKeys
     public const string MenuKeyClassInput = "Class Input";
     public const string MenuKeyClock = "Clock";
     public const string MenuKeyDatePicker = "DatePicker";
+    public const string MenuKeyDateRangePicker = "DateRangePicker";
     public const string MenuKeyDateTimePicker = "DateTimePicker";
     public const string MenuKeyDialog = "Dialog";
     public const string MenuKeyDisableContainer = "DisableContainer";
@@ -142,6 +145,7 @@ public static class MenuKeys
     public const string MenuKeyTimeBox = "TimeBox";
     public const string MenuKeyTimeline = "Timeline";
     public const string MenuKeyTimePicker = "TimePicker";
+    public const string MenuKeyTimeRangePicker = "TimeRangePicker";
     public const string MenuKeyToast = "Toast";
     public const string MenuKeyToolBar = "ToolBar";
     public const string MenuKeyTreeComboBox = "TreeComboBox";
diff --git a/demo/Ursa.Demo/ViewModels/TimePickerDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/TimePickerDemoViewModel.cs
index 7b93e1a..fed5690 100644
--- a/demo/Ursa.Demo/ViewModels/TimePickerDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/TimePickerDemoViewModel.cs
@@ -6,13 +6,9 @@ namespace Ursa.Demo.ViewModels;
 public partial class TimePickerDemoViewModel: ObservableObject
 {
     [ObservableProperty] private TimeSpan? _time;
-    [ObservableProperty] private TimeSpan? _startTime;
-    [ObservableProperty] private TimeSpan? _endTime;
-
+    
     public TimePickerDemoViewModel()
     {
         Time = new TimeSpan(12, 20, 0);
-        StartTime = new TimeSpan(8, 21, 0);
-        EndTime = new TimeSpan(18, 22, 0);
     }
 }
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/TimeRangePickerDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/TimeRangePickerDemoViewModel.cs
new file mode 100644
index 0000000..5369eaf
--- /dev/null
+++ b/demo/Ursa.Demo/ViewModels/TimeRangePickerDemoViewModel.cs
@@ -0,0 +1,16 @@
+using System;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class TimeRangePickerDemoViewModel: ObservableObject
+{
+    [ObservableProperty] private TimeSpan? _startTime;
+    [ObservableProperty] private TimeSpan? _endTime;
+
+    public TimeRangePickerDemoViewModel()
+    {
+        StartTime = new TimeSpan(8, 21, 0);
+        EndTime = new TimeSpan(18, 22, 0);
+    }
+}
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml b/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
index 639be37..850f505 100644
--- a/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
@@ -70,6 +70,7 @@
                                 Margin="8,0"
                                 Content="{DynamicResource TimePickerIconGlyph}"
                                 Focusable="False"
+                                IsVisible="{Binding !#ClearButton.IsVisible}"
                                 Theme="{DynamicResource InnerIconButton}" />
                         </Grid>
                         <Popup
@@ -164,11 +165,8 @@
         </Setter>
 
         <Style Selector="^.clearButton, ^.ClearButton">
-            <Style Selector="^:pointerover /template/ Button#ClearButton">
-                <Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNotNull}}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ Button#PART_Button">
-                <Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNull}}" />
+            <Style Selector="^:not(:empty):pointerover /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="True" />
             </Style>
         </Style>
 
diff --git a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
index 22f5236..a331bce 100644
--- a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
@@ -18,6 +18,7 @@ namespace Ursa.Controls;
 [TemplatePart(PART_StartPresenter, typeof(TimePickerPresenter))]
 [TemplatePart(PART_EndPresenter, typeof(TimePickerPresenter))]
 [TemplatePart(PART_Button, typeof(Button))]
+[PseudoClasses(PseudoClassName.PC_Empty)]
 public class TimeRangePicker : TimePickerBase, IClearControl
 {
     public const string PART_StartTextBox = "PART_StartTextBox";
@@ -92,6 +93,8 @@ public class TimeRangePicker : TimePickerBase, IClearControl
     public void Clear()
     {
         Focus(NavigationMethod.Pointer);
+        SetCurrentValue(StartTimeProperty, null);
+        SetCurrentValue(EndTimeProperty, null);
         _startPresenter?.SyncTime(null);
         _endPresenter?.SyncTime(null);
     }
@@ -120,10 +123,10 @@ public class TimeRangePicker : TimePickerBase, IClearControl
             textBox.Text = null;
             return;
         }
-
         var date = new DateTime(1, 1, 1, time.Value.Hours, time.Value.Minutes, time.Value.Seconds);
         var text = date.ToString(DisplayFormat);
         textBox.Text = text;
+        PseudoClasses.Set(PseudoClassName.PC_Empty, StartTime is null && EndTime is null);
     }
 
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)