feat: make sure clear button works. make sure text cleared if lost focus with invalid data.

demo/Ursa.Demo/Pages/DatePickerDemo.axaml

@@ -8,7 +8,7 @@
     <StackPanel Margin="20" HorizontalAlignment="Left">
         <u:CalendarView DateSelected="CalendarView_OnOnDateSelected" DatePreviewed="CalendarView_OnOnDatePreviewed"/>
         <TextBlock Text="{Binding #singlePicker.SelectedDate}" ></TextBlock>
-        <u:DatePicker Name="singlePicker" Width="200" />
+        <u:DatePicker Name="singlePicker" Width="200" Classes="ClearButton" />
-        <u:DateRangePicker Width="300" DisplayFormat="yyyyMMdd" />
+        <u:DateRangePicker Width="300" DisplayFormat="yyyyMMdd" Classes="ClearButton" />
     </StackPanel>
 </UserControl>

src/Ursa.Themes.Semi/Controls/DatePicker.axaml

@@ -1,6 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:contracts="https://irihi.tech/shared"
     xmlns:u="https://irihi.tech/ursa">
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type u:DatePicker}" TargetType="u:DatePicker">
@@ -30,7 +31,7 @@
                         <Grid
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
-                            ColumnDefinitions="*, Auto, Auto">
+                            ColumnDefinitions="*, Auto">
                             <TextBox
                                 Name="PART_TextBox"
                                 Grid.Column="0"
@@ -59,8 +60,9 @@
                                 Theme="{DynamicResource InnerIconButton}" />
                             <Button
                                 Name="PART_Button"
-                                Grid.Column="2"
+                                Grid.Column="1"
                                 Padding="0,0,8,0"
+                                IsVisible="{Binding !#ClearButton.IsVisible}"
                                 Content="{DynamicResource CalendarDatePickerIconGlyph}"
                                 Focusable="False"
                                 Theme="{DynamicResource InnerIconButton}" />
@@ -83,9 +85,9 @@
                                     <u:CalendarView
                                         Name="PART_Calendar"
                                         BorderThickness="0"
-                                        FontSize="{DynamicResource DefaultFontSize}"
                                         CornerRadius="{Binding $parent[Border].CornerRadius}"
                                         FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
+                                        FontSize="{DynamicResource DefaultFontSize}"
                                         IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" />
                                 </Border>
                             </Popup>
@@ -95,6 +97,12 @@
                 </DataValidationErrors>
             </ControlTemplate>
         </Setter>
+        
+        <Style Selector="^.clearButton, ^.ClearButton">
+            <Style Selector="^:pointerover /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="{Binding $parent[u:DatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNotNull}}" />
+            </Style>
+        </Style>
 
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#Background">

src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml

@@ -68,6 +68,7 @@
                                 Name="{x:Static u:DateRangePicker.PART_Button}"
                                 Grid.Column="3"
                                 Padding="8,0"
+                                IsVisible="{Binding !#ClearButton.IsVisible}"
                                 Content="{DynamicResource CalendarDatePickerIconGlyph}"
                                 Focusable="False"
                                 Theme="{DynamicResource InnerIconButton}" />
@@ -142,11 +143,8 @@
         </Setter>
 
         <Style Selector="^.clearButton, ^.ClearButton">
-            <Style Selector="^:pointerover /template/ Button#ClearButton">
+            <Style Selector="^:not(:empty):pointerover /template/ Button#ClearButton">
-                <Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                <Setter Property="IsVisible" Value="{Binding $parent[u:DatePicker].start, 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>
         </Style>
 

src/Ursa/Controls/DateTimePicker/DateRangePicker.cs

@@ -6,6 +6,8 @@ using Avalonia.Controls.Primitives;
 using Avalonia.Data;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Irihi.Avalonia.Shared.Common;
+using Irihi.Avalonia.Shared.Contracts;
 using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
@@ -16,7 +18,8 @@ namespace Ursa.Controls;
 [TemplatePart(PART_EndCalendar, typeof(CalendarView))]
 [TemplatePart(PART_StartTextBox, typeof(TextBox))]
 [TemplatePart(PART_EndTextBox, typeof(TextBox))]
-public class DateRangePicker : DatePickerBase
+[PseudoClasses(PseudoClassName.PC_Empty)]
+public class DateRangePicker : DatePickerBase, IClearControl
 {
     public const string PART_Button = "PART_Button";
     public const string PART_Popup = "PART_Popup";
@@ -33,19 +36,18 @@ public class DateRangePicker : DatePickerBase
         AvaloniaProperty.Register<DateRangePicker, DateTime?>(
             nameof(SelectedEndDate), defaultBindingMode: BindingMode.TwoWay);
 
-    public static readonly StyledProperty<bool> EnableMonthSyncProperty = AvaloniaProperty.Register<DateRangePicker, bool>(
+    public static readonly StyledProperty<bool> EnableMonthSyncProperty =
-        nameof(EnableMonthSync));
+        AvaloniaProperty.Register<DateRangePicker, bool>(
-
+            nameof(EnableMonthSync));
-    public bool EnableMonthSync
-    {
-        get => GetValue(EnableMonthSyncProperty);
-        set => SetValue(EnableMonthSyncProperty, value);
-    }
 
     private Button? _button;
     private CalendarView? _endCalendar;
     private TextBox? _endTextBox;
     private Popup? _popup;
+    private DateTime? _previewEnd;
+
+    private DateTime? _previewStart;
+    private bool? _start;
     private CalendarView? _startCalendar;
     private TextBox? _startTextBox;
 
@@ -57,6 +59,12 @@ public class DateRangePicker : DatePickerBase
             picker.OnSelectionChanged(args));
     }
 
+    public bool EnableMonthSync
+    {
+        get => GetValue(EnableMonthSyncProperty);
+        set => SetValue(EnableMonthSyncProperty, value);
+    }
+
     public DateTime? SelectedStartDate
     {
         get => GetValue(SelectedStartDateProperty);
@@ -69,6 +77,12 @@ public class DateRangePicker : DatePickerBase
         set => SetValue(SelectedEndDateProperty, value);
     }
 
+    public void Clear()
+    {
+        SetCurrentValue(SelectedStartDateProperty, null);
+        SetCurrentValue(SelectedEndDateProperty, null);
+    }
+
 
     private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<DateTime?> args)
     {
@@ -100,6 +114,7 @@ public class DateRangePicker : DatePickerBase
                     args.NewValue.Value.Value.ToString(DisplayFormat ?? "yyyy-MM-dd"));
             }
         }
+        PseudoClasses.Set(PseudoClassName.PC_Empty, SelectedStartDate is null && SelectedEndDate is null);
     }
 
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
@@ -109,36 +124,42 @@ public class DateRangePicker : DatePickerBase
         TextBox.TextChangedEvent.RemoveHandler(OnTextChanged, _startTextBox, _endTextBox);
         PointerPressedEvent.RemoveHandler(OnTextBoxPointerPressed, _startTextBox, _endTextBox);
         Button.ClickEvent.RemoveHandler(OnButtonClick, _button);
+        LostFocusEvent.RemoveHandler(OnTextBoxLostFocus, _startTextBox, _endTextBox);
         if (_startCalendar != null)
         {
             _startCalendar.DateSelected -= OnDateSelected;
             _startCalendar.DatePreviewed -= OnDatePreviewed;
             _startCalendar.ContextDateChanged -= OnContextDateChanged;
         }
+
         if (_endCalendar != null)
         {
             _endCalendar.DateSelected -= OnDateSelected;
             _endCalendar.DatePreviewed -= OnDatePreviewed;
             _endCalendar.ContextDateChanged -= OnContextDateChanged;
         }
+
         _button = e.NameScope.Find<Button>(PART_Button);
         _popup = e.NameScope.Find<Popup>(PART_Popup);
         _startCalendar = e.NameScope.Find<CalendarView>(PART_StartCalendar);
         _endCalendar = e.NameScope.Find<CalendarView>(PART_EndCalendar);
         _startTextBox = e.NameScope.Find<TextBox>(PART_StartTextBox);
         _endTextBox = e.NameScope.Find<TextBox>(PART_EndTextBox);
-        
+
         Button.ClickEvent.AddHandler(OnButtonClick, RoutingStrategies.Bubble, true, _button);
         GotFocusEvent.AddHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
         TextBox.TextChangedEvent.AddHandler(OnTextChanged, _startTextBox, _endTextBox);
-        PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _startTextBox, _endTextBox);
+        PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _startTextBox,
-        
+            _endTextBox);
+        LostFocusEvent.AddHandler(OnTextBoxLostFocus, _startTextBox, _endTextBox);
+
         if (_startCalendar != null)
         {
             _startCalendar.DateSelected += OnDateSelected;
             _startCalendar.DatePreviewed += OnDatePreviewed;
             _startCalendar.ContextDateChanged += OnContextDateChanged;
         }
+
         if (_endCalendar != null)
         {
             _endCalendar.DateSelected += OnDateSelected;
@@ -147,30 +168,27 @@ public class DateRangePicker : DatePickerBase
         }
     }
 
+    private void OnTextBoxLostFocus(object sender, RoutedEventArgs e)
+    {
+        if (sender == _startTextBox)
+            OnTextChangedInternal(_startTextBox, SelectedStartDateProperty);
+        else if (sender == _endTextBox) OnTextChangedInternal(_endTextBox, SelectedEndDateProperty);
+    }
+
     private void OnContextDateChanged(object sender, CalendarContext e)
     {
-        if(sender == _startCalendar && _startCalendar?.Mode == CalendarViewMode.Month)
+        if (sender == _startCalendar && _startCalendar?.Mode == CalendarViewMode.Month)
         {
-            bool needsUpdate = EnableMonthSync || _startCalendar?.ContextDate.CompareTo(_endCalendar?.ContextDate) >= 0;
+            var needsUpdate = EnableMonthSync || _startCalendar?.ContextDate.CompareTo(_endCalendar?.ContextDate) >= 0;
-            if (needsUpdate)
+            if (needsUpdate) _endCalendar?.SyncContextDate(_startCalendar?.ContextDate.NextMonth());
-            {
-                _endCalendar?.SyncContextDate(_startCalendar?.ContextDate.NextMonth());
-            }
         }
-        else if(sender == _endCalendar && _endCalendar?.Mode == CalendarViewMode.Month)
+        else if (sender == _endCalendar && _endCalendar?.Mode == CalendarViewMode.Month)
         {
-            bool needsUpdate = EnableMonthSync || _endCalendar?.ContextDate.CompareTo(_startCalendar?.ContextDate) <= 0;
+            var needsUpdate = EnableMonthSync || _endCalendar?.ContextDate.CompareTo(_startCalendar?.ContextDate) <= 0;
-            if (needsUpdate)
+            if (needsUpdate) _startCalendar?.SyncContextDate(_endCalendar?.ContextDate.PreviousMonth());
-            {
-                _startCalendar?.SyncContextDate(_endCalendar?.ContextDate.PreviousMonth());
-            }
         }
     }
 
-    private DateTime? _previewStart;
-    private DateTime? _previewEnd;
-    private bool? _start;
-    
     private void OnDatePreviewed(object sender, CalendarDayButtonEventArgs e)
     {
         if (_start == true)
@@ -179,7 +197,7 @@ public class DateRangePicker : DatePickerBase
             _startCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
             _endCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
         }
-        else if(_start == false)
+        else if (_start == false)
         {
             _previewEnd = e.Date;
             _startCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
@@ -191,10 +209,7 @@ public class DateRangePicker : DatePickerBase
     {
         if (_start == true)
         {
-            if (SelectedEndDate < e.Date)
+            if (SelectedEndDate < e.Date) SelectedEndDate = null;
-            {
-                SelectedEndDate = null;
-            }
             SetCurrentValue(SelectedStartDateProperty, e.Date);
             _startTextBox?.SetValue(TextBox.TextProperty, e.Date?.ToString(DisplayFormat ?? "yyyy-MM-dd"));
             _start = false;
@@ -204,12 +219,9 @@ public class DateRangePicker : DatePickerBase
             _endCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
             _endTextBox?.Focus();
         }
-        else if(_start == false)
+        else if (_start == false)
         {
-            if (SelectedStartDate > e.Date)
+            if (SelectedStartDate > e.Date) SelectedStartDate = null;
-            {
-                SelectedStartDate = null;
-            }
             SetCurrentValue(SelectedEndDateProperty, e.Date);
             _endTextBox?.SetValue(TextBox.TextProperty, e.Date?.ToString(DisplayFormat ?? "yyyy-MM-dd"));
             _start = null;
@@ -227,7 +239,6 @@ public class DateRangePicker : DatePickerBase
                 SetCurrentValue(IsDropdownOpenProperty, false);
             }
         }
-        
     }
 
     private void OnButtonClick(object sender, RoutedEventArgs e)
@@ -252,11 +263,13 @@ public class DateRangePicker : DatePickerBase
             if (_endCalendar is not null)
             {
                 var date2 = SelectedEndDate;
-                if (date2 is null || (date2.Value.Year==SelectedStartDate?.Year && date2.Value.Month == SelectedStartDate?.Month))
+                if (date2 is null || (date2.Value.Year == SelectedStartDate?.Year &&
+                                      date2.Value.Month == SelectedStartDate?.Month))
                 {
                     date2 = SelectedStartDate ?? DateTime.Today;
                     date2 = date2.Value.AddMonths(1);
                 }
+
                 _endCalendar.ContextDate = new CalendarContext(date2?.Year, date2?.Month);
                 _endCalendar.UpdateDayButtons();
             }
@@ -270,40 +283,38 @@ public class DateRangePicker : DatePickerBase
                 _endCalendar.ContextDate = new CalendarContext(date.Year, date.Month);
                 _endCalendar.UpdateDayButtons();
             }
+
             if (_startCalendar is not null)
             {
                 var date2 = SelectedStartDate;
-                if (date2 is null || (date2.Value.Year==SelectedEndDate?.Year && date2.Value.Month == SelectedEndDate?.Month))
+                if (date2 is null || (date2.Value.Year == SelectedEndDate?.Year &&
+                                      date2.Value.Month == SelectedEndDate?.Month))
                 {
                     date2 = SelectedStartDate ?? DateTime.Today;
                     date2 = date2.Value.AddMonths(-1);
                 }
+
                 _startCalendar.ContextDate = new CalendarContext(date2?.Year, date2?.Month);
                 _startCalendar.UpdateDayButtons();
             }
-            
         }
+
         SetCurrentValue(IsDropdownOpenProperty, true);
     }
 
     private void OnTextChanged(object sender, TextChangedEventArgs e)
     {
         if (sender == _startTextBox)
-        {
+            OnTextChangedInternal(_startTextBox, SelectedStartDateProperty, true);
-            OnTextChangedInternal(_startTextBox, SelectedStartDateProperty);
+        else if (sender == _endTextBox) OnTextChangedInternal(_endTextBox, SelectedEndDateProperty, true);
-        }
-        else if (sender == _endTextBox)
-        {
-            OnTextChangedInternal(_endTextBox, SelectedEndDateProperty);
-        }
     }
 
-    private void OnTextChangedInternal(TextBox? textBox, AvaloniaProperty property)
+    private void OnTextChangedInternal(TextBox? textBox, AvaloniaProperty property, bool fromText = false)
     {
         if (string.IsNullOrEmpty(textBox?.Text))
         {
             SetCurrentValue(property, null);
-            _startCalendar?.ClearSelection(start: true);
+            _startCalendar?.ClearSelection(true);
             _endCalendar?.ClearSelection(end: true);
         }
         else if (DisplayFormat is null || DisplayFormat.Length == 0)
@@ -311,8 +322,8 @@ public class DateRangePicker : DatePickerBase
             if (DateTime.TryParse(textBox?.Text, out var defaultTime))
             {
                 SetCurrentValue(property, defaultTime);
-                _startCalendar?.MarkDates(startDate: defaultTime, endDate: defaultTime);
+                _startCalendar?.MarkDates(defaultTime, defaultTime);
-                _endCalendar?.MarkDates(startDate: defaultTime, endDate: defaultTime);
+                _endCalendar?.MarkDates(defaultTime, defaultTime);
             }
         }
         else
@@ -329,6 +340,7 @@ public class DateRangePicker : DatePickerBase
                     _startCalendar.UpdateDayButtons();
                     _startCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
                 }
+
                 if (_endCalendar is not null)
                 {
                     var date2 = SelectedEndDate ?? SelectedStartDate ?? DateTime.Today;
@@ -339,6 +351,16 @@ public class DateRangePicker : DatePickerBase
                     _endCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
                 }
             }
+            else
+            {
+                if (!fromText)
+                {
+                    SetCurrentValue(property, null);
+                    textBox?.SetValue(TextBox.TextProperty, null);
+                    _startCalendar?.ClearSelection(true);
+                    _endCalendar?.ClearSelection(end: true);
+                }
+            }
         }
     }
 
@@ -358,13 +380,7 @@ public class DateRangePicker : DatePickerBase
             //_endCalendar.ContextDate = new CalendarContext(date2.Year, date2.Month);
             //_endCalendar.UpdateDayButtons();
         }
+
         SetCurrentValue(IsDropdownOpenProperty, true);
     }
-
-    protected override void OnLostFocus(RoutedEventArgs e)
-    {
-        //base.OnLostFocus(e);
-        //SetCurrentValue(IsDropdownOpenProperty, false);
-        //_start = null;
-    }
 }