From 6461490c3461cd271ab7d5d63202cd5fe31b09bd Mon Sep 17 00:00:00 2001
From: Dong Bin <popmessiah@hotmail.com>
Date: Wed, 19 Feb 2025 21:35:44 +0800
Subject: [PATCH 1/5] feat: make text editable.

---
 .../Controls/DateRangePicker.axaml            |   3 +-
 .../Controls/DateTimePicker/DatePicker.cs     |  54 +++---
 .../DateTimePicker/DateRangePicker.cs         | 105 +++++++++++-
 .../Controls/DateTimePicker/DateTimePicker.cs | 102 +++++++-----
 .../Controls/DateTimePicker/TimePicker.cs     |  33 +++-
 .../DateTimePicker/TimeRangePicker.cs         | 156 +++++++++++++++---
 6 files changed, 356 insertions(+), 97 deletions(-)

diff --git a/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml b/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml
index c9ba2ed..db9c77b 100644
--- a/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml
@@ -26,7 +26,7 @@
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
                             CornerRadius="{TemplateBinding CornerRadius}" />
-                        <Grid ColumnDefinitions="*, Auto, * Auto">
+                        <Grid ColumnDefinitions="*, Auto, * Auto" Name="PART_PassThroughElement">
                             <TextBox
                                 Name="{x:Static u:DateRangePicker.PART_StartTextBox}"
                                 Grid.Column="0"
@@ -75,6 +75,7 @@
                         </Grid>
                         <Popup
                             Name="{x:Static contracts:PartNames.PART_Popup}"
+                            OverlayInputPassThroughElement="{Binding #PART_PassThroughElement}"
                             HorizontalOffset="-4"
                             IsLightDismissEnabled="True"
                             IsOpen="{TemplateBinding IsDropdownOpen,
diff --git a/src/Ursa/Controls/DateTimePicker/DatePicker.cs b/src/Ursa/Controls/DateTimePicker/DatePicker.cs
index 03f673f..256cb7a 100644
--- a/src/Ursa/Controls/DateTimePicker/DatePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/DatePicker.cs
@@ -129,26 +129,7 @@ public class DatePicker: DatePickerBase, IClearControl
         }
         else
         {
-            if (DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
-                    out var date))
-            {
-                SetCurrentValue(SelectedDateProperty, date);
-                if (_calendar is not null)
-                {
-                    _calendar.ContextDate = _calendar.ContextDate.With(year: date.Year, month: date.Month);
-                    _calendar.UpdateDayButtons();
-                }
-                _calendar?.MarkDates(startDate: date, endDate: date);
-            }
-            else
-            {
-                SetCurrentValue(SelectedDateProperty, null);
-                if (!fromText)
-                {
-                    _textBox?.SetValue(TextBox.TextProperty, null);
-                }
-                _calendar?.ClearSelection();
-            }
+            CommitInput(!fromText);
         }
     }
 
@@ -192,6 +173,13 @@ public class DatePicker: DatePickerBase, IClearControl
             case Key.Tab:
                 SetCurrentValue(IsDropdownOpenProperty, false);
                 return;
+            case Key.Enter:
+            {
+                SetCurrentValue(IsDropdownOpenProperty, false);
+                CommitInput(true);
+                e.Handled = true;
+                return;
+            }
             default:
                 base.OnKeyDown(e);
                 break;
@@ -219,6 +207,7 @@ public class DatePicker: DatePickerBase, IClearControl
         {
             return;
         }
+        CommitInput(true);
         SetCurrentValue(IsDropdownOpenProperty, false);
     }
 
@@ -230,12 +219,33 @@ public class DatePicker: DatePickerBase, IClearControl
 
         if (hasFocus)
         {
-
             if (!wasFocused && _textBox != null)
             {
                 _textBox.Focus();
-                _textBox.SelectAll();
             }
         }
     }
+
+    private void CommitInput(bool clearWhenInvalid)
+    {
+        if (DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
+                out var date))
+        {
+            SetCurrentValue(SelectedDateProperty, date);
+            if (_calendar is not null)
+            {
+                _calendar.ContextDate = _calendar.ContextDate.With(year: date.Year, month: date.Month);
+                _calendar.UpdateDayButtons();
+            }
+            _calendar?.MarkDates(startDate: date, endDate: date);
+        }
+        else
+        {
+            if (clearWhenInvalid)
+            {
+                SetCurrentValue(SelectedDateProperty, null);
+            }
+            _calendar?.ClearSelection();
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/DateTimePicker/DateRangePicker.cs b/src/Ursa/Controls/DateTimePicker/DateRangePicker.cs
index 56968f7..2bef08b 100644
--- a/src/Ursa/Controls/DateTimePicker/DateRangePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/DateRangePicker.cs
@@ -9,6 +9,7 @@ using Avalonia.Interactivity;
 using Irihi.Avalonia.Shared.Common;
 using Irihi.Avalonia.Shared.Contracts;
 using Irihi.Avalonia.Shared.Helpers;
+using Calendar = Avalonia.Controls.Calendar;
 
 namespace Ursa.Controls;
 
@@ -53,6 +54,7 @@ public class DateRangePicker : DatePickerBase, IClearControl
 
     static DateRangePicker()
     {
+        FocusableProperty.OverrideDefaultValue<DateRangePicker>(true);
         SelectedStartDateProperty.Changed.AddClassHandler<DateRangePicker, DateTime?>((picker, args) =>
             picker.OnSelectionChanged(args));
         SelectedEndDateProperty.Changed.AddClassHandler<DateRangePicker, DateTime?>((picker, args) =>
@@ -279,7 +281,6 @@ public class DateRangePicker : DatePickerBase, IClearControl
 
     private void OnButtonClick(object? sender, RoutedEventArgs e)
     {
-        Focus(NavigationMethod.Pointer);
         SetCurrentValue(IsDropdownOpenProperty, !IsDropdownOpen);
         _startTextBox?.Focus();
         // _start = true;
@@ -456,9 +457,111 @@ public class DateRangePicker : DatePickerBase, IClearControl
                 }
                 return;
             }
+            case Key.Enter:
+            {
+                SetCurrentValue(IsDropdownOpenProperty, false);
+                CommitInput(true);
+                e.Handled = true;
+                return;
+            }
             default:
                 base.OnKeyDown(e);
                 break;
         }
     }
+    
+    protected override void OnGotFocus(GotFocusEventArgs e)
+    {
+        base.OnGotFocus(e);
+        FocusChanged(IsKeyboardFocusWithin);
+    }
+
+    protected override void OnLostFocus(RoutedEventArgs e)
+    {
+        base.OnLostFocus(e);
+        FocusChanged(IsKeyboardFocusWithin);
+        var top = TopLevel.GetTopLevel(this);
+        var element = top?.FocusManager?.GetFocusedElement();
+        if (element is Visual v && _popup?.IsInsidePopup(v)==true)
+        {
+            return;
+        }
+
+        if (element == _startTextBox || element == _endTextBox)
+        {
+            return;
+        }
+        CommitInput(true);
+        SetCurrentValue(IsDropdownOpenProperty, false);
+    }
+
+    private bool _isFocused;
+    private void FocusChanged(bool hasFocus)
+    {
+        bool wasFocused = _isFocused;
+        _isFocused = hasFocus;
+
+        if (hasFocus)
+        {
+            if (!wasFocused && _startTextBox != null)
+            {
+                _startTextBox.Focus();
+                _start = true;
+            }
+        }
+    }
+    
+    private void CommitInput(bool clearWhenInvalid)
+    {
+        DateTime? startDate = null;
+        DateTime? endDate = null;
+        if (DateTime.TryParseExact(_startTextBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
+                out var localStartDate))
+        {
+            startDate = localStartDate;
+            SetCurrentValue(SelectedStartDateProperty, localStartDate);
+            if (_startCalendar is not null)
+            {
+                _startCalendar.ContextDate = _startCalendar.ContextDate.With(year: localStartDate.Year, month: localStartDate.Month);
+                _startCalendar.UpdateDayButtons();
+            }
+        }
+        else
+        {
+            if (clearWhenInvalid)
+            {
+                SetCurrentValue(SelectedStartDateProperty, null);
+            }
+            
+        }
+        if (DateTime.TryParseExact(_endTextBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
+                out var localEndDate))
+        {
+            endDate = localEndDate;
+            SetCurrentValue(SelectedEndDateProperty, localEndDate);
+            if (_endCalendar is not null)
+            {
+                _endCalendar.ContextDate = _endCalendar.ContextDate.With(year: localEndDate.Year, month: localEndDate.Month);
+                _endCalendar.UpdateDayButtons();
+            }
+        }
+        else
+        {
+            if (clearWhenInvalid)
+            {
+                SetCurrentValue(SelectedEndDateProperty, null);
+            }
+        }
+        if (startDate is null || endDate is null)
+        {
+            _startCalendar?.ClearSelection();
+            _endCalendar?.ClearSelection();
+        }
+        else
+        {
+            _startCalendar?.MarkDates(startDate: startDate, endDate: endDate);
+            _endCalendar?.MarkDates(startDate: startDate, endDate: endDate);
+        }
+    }
+    
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/DateTimePicker/DateTimePicker.cs b/src/Ursa/Controls/DateTimePicker/DateTimePicker.cs
index 22793ac..dca00aa 100644
--- a/src/Ursa/Controls/DateTimePicker/DateTimePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/DateTimePicker.cs
@@ -41,10 +41,12 @@ public class DateTimePicker : DatePickerBase
     private Button? _button;
     private CalendarView? _calendar;
     private TextBox? _textBox;
+    private Popup? _popup;
     private TimePickerPresenter? _timePickerPresenter;
 
     static DateTimePicker()
     {
+        FocusableProperty.OverrideDefaultValue<DateTimePicker>(true);
         DisplayFormatProperty.OverrideDefaultValue<DateTimePicker>(CultureInfo.InvariantCulture.DateTimeFormat.FullDateTimePattern);
         SelectedDateProperty.Changed.AddClassHandler<DateTimePicker, DateTime?>((picker, args) =>
             picker.OnSelectionChanged(args));
@@ -102,19 +104,17 @@ public class DateTimePicker : DatePickerBase
         base.OnApplyTemplate(e);
         GotFocusEvent.RemoveHandler(OnTextBoxGetFocus, _textBox);
         TextBox.TextChangedEvent.RemoveHandler(OnTextChanged, _textBox);
-        PointerPressedEvent.RemoveHandler(OnTextBoxPointerPressed, _textBox);
         Button.ClickEvent.RemoveHandler(OnButtonClick, _button);
         CalendarView.DateSelectedEvent.RemoveHandler(OnDateSelected, _calendar);
         TimePickerPresenter.SelectedTimeChangedEvent.RemoveHandler(OnTimeSelectedChanged, _timePickerPresenter);
         _button = e.NameScope.Find<Button>(PART_Button);
-        e.NameScope.Find<Popup>(PART_Popup);
+        _popup = e.NameScope.Find<Popup>(PART_Popup);
         _textBox = e.NameScope.Find<TextBox>(PART_TextBox);
         _calendar = e.NameScope.Find<CalendarView>(PART_Calendar);
         _timePickerPresenter = e.NameScope.Find<TimePickerPresenter>(PART_TimePicker);
         Button.ClickEvent.AddHandler(OnButtonClick, RoutingStrategies.Bubble, true, _button);
         GotFocusEvent.AddHandler(OnTextBoxGetFocus, _textBox);
         TextBox.TextChangedEvent.AddHandler(OnTextChanged, _textBox);
-        PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _textBox);
         CalendarView.DateSelectedEvent.AddHandler(OnDateSelected, RoutingStrategies.Bubble, true, _calendar);
         TimePickerPresenter.SelectedTimeChangedEvent.AddHandler(OnTimeSelectedChanged, _timePickerPresenter);
         SyncSelectedDateToText(SelectedDate);
@@ -165,21 +165,10 @@ public class DateTimePicker : DatePickerBase
 
     private void OnButtonClick(object? sender, RoutedEventArgs e)
     {
-        Focus(NavigationMethod.Pointer);
-        SetCurrentValue(IsDropdownOpenProperty, !IsDropdownOpen);
-    }
-
-    private void OnTextBoxPointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (_calendar is not null)
+        if (IsFocused)
         {
-            var date = SelectedDate ?? DateTime.Now;
-            _calendar.ContextDate = new CalendarContext(date.Year, date.Month);
-            _calendar.UpdateDayButtons();
-            _timePickerPresenter?.SyncTime(SelectedDate?.TimeOfDay);
+            SetCurrentValue(IsDropdownOpenProperty, !IsDropdownOpen);
         }
-
-        SetCurrentValue(IsDropdownOpenProperty, true);
     }
 
     private bool _fromText = false;
@@ -211,26 +200,7 @@ public class DateTimePicker : DatePickerBase
         }
         else
         {
-            if (DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
-                    out var date))
-            {
-                SetCurrentValue(SelectedDateProperty, date);
-                if (_calendar is not null)
-                {
-                    _calendar.ContextDate = _calendar.ContextDate.With(date.Year, date.Month);
-                    _calendar.UpdateDayButtons();
-                }
-
-                _calendar?.MarkDates(date.Date, date.Date);
-                _timePickerPresenter?.SyncTime(date.TimeOfDay);
-            }
-            else
-            {
-                SetCurrentValue(SelectedDateProperty, null);
-                if (!fromText) _textBox?.SetValue(TextBox.TextProperty, null);
-                _calendar?.ClearSelection();
-                _timePickerPresenter?.SyncTime(null);
-            }
+            CommitInput(!fromText);
         }
         _fromText = temp;
     }
@@ -244,15 +214,66 @@ public class DateTimePicker : DatePickerBase
             _calendar.UpdateDayButtons();
             _timePickerPresenter?.SyncTime(date.TimeOfDay);
         }
-
         SetCurrentValue(IsDropdownOpenProperty, true);
     }
 
+    protected override void OnGotFocus(GotFocusEventArgs e)
+    {
+        base.OnGotFocus(e);
+        FocusChanged(IsKeyboardFocusWithin);
+    }
+
     protected override void OnLostFocus(RoutedEventArgs e)
     {
         base.OnLostFocus(e);
-        // SetCurrentValue(IsDropdownOpenProperty, false);
-        SetSelectedDate();
+        FocusChanged(IsKeyboardFocusWithin);
+        var top = TopLevel.GetTopLevel(this);
+        var element = top?.FocusManager?.GetFocusedElement();
+        if (element is Visual v && _popup?.IsInsidePopup(v)==true)
+        {
+            return;
+        }
+        CommitInput(true);
+        SetCurrentValue(IsDropdownOpenProperty, false);
+    }
+
+    private bool _isFocused;
+    private void FocusChanged(bool hasFocus)
+    {
+        bool wasFocused = _isFocused;
+        _isFocused = hasFocus;
+
+        if (hasFocus)
+        {
+            if (!wasFocused && _textBox != null)
+            {
+                _textBox.Focus();
+            }
+        }
+    }
+    
+    private void CommitInput(bool clearWhenInvalid)
+    {
+        if (DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
+                out var date))
+        {
+            SetCurrentValue(SelectedDateProperty, date);
+            if (_calendar is not null)
+            {
+                _calendar.ContextDate = _calendar.ContextDate.With(date.Year, date.Month);
+                _calendar.UpdateDayButtons();
+            }
+
+            _calendar?.MarkDates(date.Date, date.Date);
+            _timePickerPresenter?.SyncTime(date.TimeOfDay);
+        }
+        else
+        {
+            SetCurrentValue(SelectedDateProperty, null);
+            if (clearWhenInvalid) _textBox?.SetValue(TextBox.TextProperty, null);
+            _calendar?.ClearSelection();
+            _timePickerPresenter?.SyncTime(null);
+        }
     }
 
 
@@ -264,20 +285,17 @@ public class DateTimePicker : DatePickerBase
             e.Handled = true;
             return;
         }
-
         if (e.Key == Key.Down)
         {
             SetCurrentValue(IsDropdownOpenProperty, true);
             e.Handled = true;
             return;
         }
-
         if (e.Key == Key.Tab)
         {
             SetCurrentValue(IsDropdownOpenProperty, false);
             return;
         }
-
         base.OnKeyDown(e);
     }
 
diff --git a/src/Ursa/Controls/DateTimePicker/TimePicker.cs b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
index ccd11e5..2661bad 100644
--- a/src/Ursa/Controls/DateTimePicker/TimePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
@@ -140,10 +140,17 @@ public class TimePicker : TimePickerBase, IClearControl
             SetCurrentValue(IsDropdownOpenProperty, false);
             return;
         }
+
+        if (e.Key == Key.Enter)
+        {
+            CommitInput(true);
+            SetCurrentValue(IsDropdownOpenProperty, false);
+            e.Handled = true;
+            return;
+        }
         base.OnKeyDown(e);
     }
 
-
     private void OnTextChanged(object? sender, TextChangedEventArgs e)
     {
         if (string.IsNullOrEmpty(_textBox?.Text))
@@ -156,9 +163,7 @@ public class TimePicker : TimePickerBase, IClearControl
         }
         else
         {
-            if (DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
-                    out var time))
-                _presenter?.SyncTime(time.TimeOfDay);
+            CommitInput(false);
         }
     }
 
@@ -207,7 +212,6 @@ public class TimePicker : TimePickerBase, IClearControl
     protected override void OnGotFocus(GotFocusEventArgs e)
     {
         base.OnGotFocus(e);
-        // SetCurrentValue(IsDropdownOpenProperty, true);
         FocusChanged(IsKeyboardFocusWithin);
     }
 
@@ -219,6 +223,7 @@ public class TimePicker : TimePickerBase, IClearControl
         var element = top?.FocusManager?.GetFocusedElement();
         if (element is Visual v && _popup?.IsInsidePopup(v) == true) return;
         if (element == _textBox) return;
+        CommitInput(true);
         SetCurrentValue(IsDropdownOpenProperty, false);
     }
 
@@ -230,4 +235,22 @@ public class TimePicker : TimePickerBase, IClearControl
             if (!wasFocused && _textBox != null)
                 _textBox.Focus();
     }
+    
+    private void CommitInput(bool clearWhenInvalid)
+    {
+        if (DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
+                out var time))
+        {
+            SetCurrentValue(SelectedTimeProperty, time.TimeOfDay);
+            _presenter?.SyncTime(time.TimeOfDay);
+        }
+        else
+        {
+            if (clearWhenInvalid)
+            {
+                SetCurrentValue(SelectedTimeProperty, null);
+            }
+            _presenter?.SyncTime(null);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
index 5ae6fbd..22f5236 100644
--- a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
@@ -1,4 +1,5 @@
-using Avalonia;
+using System.Globalization;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
@@ -45,31 +46,22 @@ public class TimeRangePicker : TimePickerBase, IClearControl
     private Button? _button;
     private TimePickerPresenter? _endPresenter;
     private TextBox? _endTextBox;
+    private bool _isFocused;
+    private Popup? _popup;
     private TimePickerPresenter? _startPresenter;
 
     private TextBox? _startTextBox;
     private bool _suppressTextPresenterEvent;
 
-
     static TimeRangePicker()
     {
+        FocusableProperty.OverrideDefaultValue<TimeRangePicker>(true);
         StartTimeProperty.Changed.AddClassHandler<TimeRangePicker, TimeSpan?>((picker, args) =>
             picker.OnSelectionChanged(args));
         EndTimeProperty.Changed.AddClassHandler<TimeRangePicker, TimeSpan?>((picker, args) =>
             picker.OnSelectionChanged(args, false));
-        DisplayFormatProperty.Changed.AddClassHandler<TimeRangePicker, string?>((picker, args) => picker.OnDisplayFormatChanged(args));
-    }
-
-    private void OnDisplayFormatChanged(AvaloniaPropertyChangedEventArgs<string?> args)
-    {
-        if (_startTextBox is not null)
-        {
-            SyncTimeToText(StartTime);
-        }
-        if (_endTextBox is not null)
-        {
-            SyncTimeToText(EndTime, false);
-        }
+        DisplayFormatProperty.Changed.AddClassHandler<TimeRangePicker, string?>((picker, args) =>
+            picker.OnDisplayFormatChanged(args));
     }
 
 
@@ -104,6 +96,12 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         _endPresenter?.SyncTime(null);
     }
 
+    private void OnDisplayFormatChanged(AvaloniaPropertyChangedEventArgs<string?> args)
+    {
+        if (_startTextBox is not null) SyncTimeToText(StartTime);
+        if (_endTextBox is not null) SyncTimeToText(EndTime, false);
+    }
+
     private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<TimeSpan?> args, bool start = true)
     {
         SyncTimeToText(args.NewValue.Value, start);
@@ -133,12 +131,12 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         base.OnApplyTemplate(e);
 
         GotFocusEvent.RemoveHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
-        PointerPressedEvent.RemoveHandler(OnTextBoxPointerPressed, _startTextBox, _endTextBox);
         Button.ClickEvent.RemoveHandler(OnButtonClick, _button);
         TimePickerPresenter.SelectedTimeChangedEvent.RemoveHandler(OnPresenterTimeChanged, _startPresenter,
             _endPresenter);
+        TextBox.TextChangedEvent.RemoveHandler(OnTextChanged, _startTextBox, _endTextBox);
 
-        e.NameScope.Find<Popup>(PartNames.PART_Popup);
+        _popup = e.NameScope.Find<Popup>(PartNames.PART_Popup);
         _startTextBox = e.NameScope.Find<TextBox>(PART_StartTextBox);
         _endTextBox = e.NameScope.Find<TextBox>(PART_EndTextBox);
         _startPresenter = e.NameScope.Find<TimePickerPresenter>(PART_StartPresenter);
@@ -146,34 +144,71 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         _button = e.NameScope.Find<Button>(PART_Button);
 
         GotFocusEvent.AddHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
-        PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _startTextBox,
-            _endTextBox);
         Button.ClickEvent.AddHandler(OnButtonClick, _button);
         TimePickerPresenter.SelectedTimeChangedEvent.AddHandler(OnPresenterTimeChanged, _startPresenter, _endPresenter);
-        
+        TextBox.TextChangedEvent.AddHandler(OnTextChanged, _startTextBox, _endTextBox);
+
         _startPresenter?.SyncTime(StartTime);
         _endPresenter?.SyncTime(EndTime);
         SyncTimeToText(StartTime);
         SyncTimeToText(EndTime, false);
     }
 
+    private void OnTextChanged(object? sender, TextChangedEventArgs e)
+    {
+        if (Equals(sender, _startTextBox))
+            OnTextChangedInternal(_startTextBox, _startPresenter, StartTimeProperty, true);
+        else if (Equals(sender, _endTextBox)) OnTextChangedInternal(_endTextBox, _endPresenter, EndTimeProperty, true);
+    }
+
+    private void OnTextChangedInternal(TextBox? textBox, TimePickerPresenter? presenter, AvaloniaProperty property,
+        bool fromText = false)
+    {
+        if (textBox?.Text is null || string.IsNullOrEmpty(textBox.Text))
+        {
+            SetCurrentValue(property, null);
+            presenter?.SyncTime(null);
+        }
+        else if (DisplayFormat is null || DisplayFormat.Length == 0)
+        {
+            if (DateTime.TryParse(textBox.Text, out var defaultTime))
+            {
+                SetCurrentValue(property, defaultTime.TimeOfDay);
+                presenter?.SyncTime(defaultTime.TimeOfDay);
+            }
+        }
+        else
+        {
+            if (DateTime.TryParseExact(textBox.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
+                    out var date))
+            {
+                SetCurrentValue(property, date.TimeOfDay);
+                presenter?.SyncTime(date.TimeOfDay);
+            }
+            else
+            {
+                if (!fromText)
+                {
+                    SetCurrentValue(property, null);
+                    textBox.SetValue(TextBox.TextProperty, null);
+                    presenter?.SyncTime(null);
+                }
+            }
+        }
+    }
+
     private void OnPresenterTimeChanged(object? sender, TimeChangedEventArgs e)
     {
+        if (!IsInitialized) return;
         if (_suppressTextPresenterEvent) return;
         SetCurrentValue(Equals(sender, _startPresenter) ? StartTimeProperty : EndTimeProperty, e.NewTime);
     }
 
     private void OnButtonClick(object? sender, RoutedEventArgs e)
     {
-        Focus(NavigationMethod.Pointer);
         SetCurrentValue(IsDropdownOpenProperty, !IsDropdownOpen);
     }
 
-    private void OnTextBoxPointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        SetCurrentValue(IsDropdownOpenProperty, true);
-    }
-
     private void OnTextBoxGetFocus(object? sender, GotFocusEventArgs e)
     {
         SetCurrentValue(IsDropdownOpenProperty, true);
@@ -201,6 +236,14 @@ public class TimeRangePicker : TimePickerBase, IClearControl
             return;
         }
 
+        if (e.Key == Key.Enter)
+        {
+            SetCurrentValue(IsDropdownOpenProperty, false);
+            CommitInput(true);
+            e.Handled = true;
+            return;
+        }
+
         base.OnKeyDown(e);
     }
 
@@ -217,4 +260,65 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         SetCurrentValue(IsDropdownOpenProperty, false);
         Focus();
     }
+
+    protected override void OnGotFocus(GotFocusEventArgs e)
+    {
+        base.OnGotFocus(e);
+        FocusChanged(IsKeyboardFocusWithin);
+    }
+
+    protected override void OnLostFocus(RoutedEventArgs e)
+    {
+        base.OnLostFocus(e);
+        FocusChanged(IsKeyboardFocusWithin);
+        var top = TopLevel.GetTopLevel(this);
+        var element = top?.FocusManager?.GetFocusedElement();
+        if (element is Visual v && _popup?.IsInsidePopup(v) == true) return;
+        if (element == _startTextBox || element == _endTextBox) return;
+        CommitInput(true);
+        SetCurrentValue(IsDropdownOpenProperty, false);
+    }
+
+    private void FocusChanged(bool hasFocus)
+    {
+        var wasFocused = _isFocused;
+        _isFocused = hasFocus;
+        if (hasFocus)
+            if (!wasFocused && _startTextBox != null)
+                _startTextBox.Focus();
+    }
+
+    private void CommitInput(bool clearWhenInvalid)
+    {
+        if (DateTime.TryParseExact(_startTextBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture,
+                DateTimeStyles.None,
+                out var start))
+        {
+            _startPresenter?.SyncTime(start.TimeOfDay);
+            SetCurrentValue(StartTimeProperty, start.TimeOfDay);
+        }
+        else
+        {
+            if (clearWhenInvalid)
+            {
+                _startTextBox?.SetValue(TextBox.TextProperty, null);
+                _startPresenter?.SyncTime(null);
+            }
+        }
+
+        if (DateTime.TryParseExact(_endTextBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
+                out var end))
+        {
+            _endPresenter?.SyncTime(end.TimeOfDay);
+            SetCurrentValue(EndTimeProperty, end.TimeOfDay);
+        }
+        else
+        {
+            if (clearWhenInvalid)
+            {
+                _endTextBox?.SetValue(TextBox.TextProperty, null);
+                _endPresenter?.SyncTime(null);
+            }
+        }
+    }
 }
\ No newline at end of file

From fa5c9d1125d0a4fa2fe7383d6b38fbba2068917b Mon Sep 17 00:00:00 2001
From: Dong Bin <popmessiah@hotmail.com>
Date: Wed, 19 Feb 2025 22:09:27 +0800
Subject: [PATCH 2/5] feat: add demo, fix clear button of TimeRangePicker.

---
 demo/Ursa.Demo/Pages/DatePickerDemo.axaml     | 48 ++++++++++---------
 demo/Ursa.Demo/Pages/DatePickerDemo.axaml.cs  | 10 ----
 .../Ursa.Demo/Pages/DateRangePickerDemo.axaml | 37 ++++++++++++++
 .../Pages/DateRangePickerDemo.axaml.cs        | 13 +++++
 demo/Ursa.Demo/Pages/TimePickerDemo.axaml     | 10 ----
 .../Ursa.Demo/Pages/TimeRangePickerDemo.axaml | 44 +++++++++++++++++
 .../Pages/TimeRangePickerDemo.axaml.cs        | 13 +++++
 .../ViewModels/DatePickerDemoViewModel.cs     | 13 -----
 .../DateRangePickerDemoViewModel.cs           | 16 +++++++
 .../Ursa.Demo/ViewModels/MainViewViewModel.cs |  2 +
 demo/Ursa.Demo/ViewModels/MenuViewModel.cs    |  6 ++-
 .../ViewModels/TimePickerDemoViewModel.cs     |  6 +--
 .../TimeRangePickerDemoViewModel.cs           | 16 +++++++
 .../Controls/TimeRangePicker.axaml            |  8 ++--
 .../DateTimePicker/TimeRangePicker.cs         |  5 +-
 15 files changed, 180 insertions(+), 67 deletions(-)
 create mode 100644 demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml
 create mode 100644 demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml.cs
 create mode 100644 demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml
 create mode 100644 demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml.cs
 create mode 100644 demo/Ursa.Demo/ViewModels/DateRangePickerDemoViewModel.cs
 create mode 100644 demo/Ursa.Demo/ViewModels/TimeRangePickerDemoViewModel.cs

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)

From d6b50ce1503e837c573aa8c7edc89bf97b43db33 Mon Sep 17 00:00:00 2001
From: Dong Bin <popmessiah@hotmail.com>
Date: Wed, 19 Feb 2025 22:12:06 +0800
Subject: [PATCH 3/5] feat: add menu tag.

---
 demo/Ursa.Demo/ViewModels/MenuViewModel.cs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
index d1a92a4..fde221b 100644
--- a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
@@ -52,12 +52,12 @@ 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 = "Date Picker", Key = MenuKeys.MenuKeyDatePicker, Status = "Updated" },
+                    new() { MenuHeader = "Date Range Picker", Key = MenuKeys.MenuKeyDateRangePicker, Status = "Updated" },
+                    new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker, Status = "Updated" },
                     new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
-                    new() { MenuHeader = "Time Picker", Key = MenuKeys.MenuKeyTimePicker },
-                    new() { MenuHeader = "Time Range Picker", Key = MenuKeys.MenuKeyTimeRangePicker },
+                    new() { MenuHeader = "Time Picker", Key = MenuKeys.MenuKeyTimePicker, Status = "Updated" },
+                    new() { MenuHeader = "Time Range Picker", Key = MenuKeys.MenuKeyTimeRangePicker, Status = "Updated" },
                     new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock }
                 }
             },

From fa86d34e2be92504441a3301fe6e9d98a4c1d1c4 Mon Sep 17 00:00:00 2001
From: Dong Bin <popmessiah@hotmail.com>
Date: Wed, 19 Feb 2025 22:28:26 +0800
Subject: [PATCH 4/5] fix: fix a ut after behavior change.

---
 .../Controls/DateTimePicker/DatePickerTests.cs       | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/tests/HeadlessTest.Ursa/Controls/DateTimePicker/DatePickerTests.cs b/tests/HeadlessTest.Ursa/Controls/DateTimePicker/DatePickerTests.cs
index af5e41f..005e16a 100644
--- a/tests/HeadlessTest.Ursa/Controls/DateTimePicker/DatePickerTests.cs
+++ b/tests/HeadlessTest.Ursa/Controls/DateTimePicker/DatePickerTests.cs
@@ -270,9 +270,18 @@ public class DatePickerTests
             HorizontalAlignment = HorizontalAlignment.Left,
             VerticalAlignment = VerticalAlignment.Top
         };
-        window.Content = picker;
+        var focustextBox = new TextBox();
+        window.Content = new StackPanel()
+        {
+            Children =
+            {
+                picker,
+                focustextBox,
+            }
+        };
         window.Show();
         Dispatcher.UIThread.RunJobs();
+        picker.Focus();
         var textBox = picker.GetTemplateChildOfType<TextBox>(DatePicker.PART_TextBox);
         Dispatcher.UIThread.RunJobs();
         Assert.Null(picker.SelectedDate);
@@ -280,6 +289,7 @@ public class DatePickerTests
         Dispatcher.UIThread.RunJobs();
         Assert.Equal(new DateTime(2025, 2, 18), picker.SelectedDate);
         textBox?.SetValue(TextBox.TextProperty, "2025-02-18-");
+        focustextBox.Focus();
         Dispatcher.UIThread.RunJobs();
         Assert.Null(picker.SelectedDate);
     }

From 862baea730925156ebba16d5cde3dda4d5731668 Mon Sep 17 00:00:00 2001
From: Dong Bin <popmessiah@hotmail.com>
Date: Thu, 20 Feb 2025 02:14:21 +0800
Subject: [PATCH 5/5] misc: fix a minor issue in demo.

---
 demo/Ursa.Demo/Pages/DatePickerDemo.axaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/Ursa.Demo/Pages/DatePickerDemo.axaml b/demo/Ursa.Demo/Pages/DatePickerDemo.axaml
index 448cbca..ffbd131 100644
--- a/demo/Ursa.Demo/Pages/DatePickerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/DatePickerDemo.axaml
@@ -11,7 +11,7 @@
     x:DataType="viewModels:DatePickerDemoViewModel"
     mc:Ignorable="d">
     <StackPanel Margin="20" HorizontalAlignment="Left">
-        <TextBox Name="format" InnerLeftContent="Display Format" />
+        <TextBox Name="format" InnerLeftContent="Display Format" Text="yyyy-MM-dd" />
         <TextBlock Text="Default" />
         <u:DatePicker Width="200" DisplayFormat="{Binding #format.Text}" />
         <TextBlock Text="Binding" />