Merge pull request #580 from irihitech/commitinput

Update Date and Time pickers for better text input experience.

demo/Ursa.Demo/Pages/DatePickerDemo.axaml

@@ -1,24 +1,28 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<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" d:DesignWidth="800" d:DesignHeight="450"
+    mc:Ignorable="d">
-             x:Class="Ursa.Demo.Pages.DatePickerDemo">
     <StackPanel Margin="20" HorizontalAlignment="Left">
-        <u:Form>
+        <TextBox Name="format" InnerLeftContent="Display Format" Text="yyyy-MM-dd" />
-            <u:DatePicker Width="200" u:FormItem.Label="_Test"/>
+        <TextBlock Text="Default" />
-            <TextBox Width="200" u:FormItem.Label="_West"/>
+        <u:DatePicker Width="200" DisplayFormat="{Binding #format.Text}" />
-        </u:Form>
+        <TextBlock Text="Binding" />
-        <u:CalendarView DateSelected="CalendarView_OnOnDateSelected" DatePreviewed="CalendarView_OnOnDatePreviewed"/>
+        <u:DatePicker
-        <TextBlock Text="{Binding #singlePicker.SelectedDate}" ></TextBlock>
+            Width="200"
-        <u:DatePicker Name="singlePicker" Width="200" Classes="ClearButton" />
+            DisplayFormat="{Binding #format.Text}"
-        <u:DateRangePicker Width="300" DisplayFormat="yyyyMMdd" Classes="ClearButton" />
+            SelectedDate="{Binding SelectedDate, Mode=TwoWay}" />
-        
+        <TextBlock Text="Clear Button" />
-        <TextBlock Text="Binding"></TextBlock>
+        <u:DatePicker
-        <u:DatePicker Width="200" SelectedDate="{Binding SelectedDate, Mode=TwoWay}"/>
+            Name="singlePicker"
-        <u:DateRangePicker Width="300" SelectedStartDate="{Binding StartDate}" SelectedEndDate="{Binding EndDate}"/>
+            Width="200"
+            Classes="ClearButton" />
     </StackPanel>
 </UserControl>

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());
-    }
 }

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>

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();
+    }
+}

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>

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>

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();
+    }
+}

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))
-        {
-            
-        }
     }
 }

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);
+    }
+}

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(),

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -52,10 +52,12 @@ public class MenuViewModel : ViewModelBase
             {
                 MenuHeader = "Date & Time", Children = new ObservableCollection<MenuItemViewModel>
                 {
-                    new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
+                    new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker, Status = "Updated" },
-                    new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
+                    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 = "TimePicker", Key = MenuKeys.MenuKeyTimePicker },
+                    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 }
                 }
             },
@@ -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";

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);
     }
 }

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);
+    }
+}

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,

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">
+            <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="True" />
-            </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/DatePicker.cs

@@ -129,26 +129,7 @@ public class DatePicker: DatePickerBase, IClearControl
         }
         else
         {
-            if (DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
+            CommitInput(!fromText);
-                    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();
-            }
         }
     }
 
@@ -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();
+        }
+    }
 }

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);
+        }
+    }
+    
 }

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);
+        if (IsFocused)
+        {
             SetCurrentValue(IsDropdownOpenProperty, !IsDropdownOpen);
         }
-
-    private void OnTextBoxPointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (_calendar is not null)
-        {
-            var date = SelectedDate ?? DateTime.Now;
-            _calendar.ContextDate = new CalendarContext(date.Year, date.Month);
-            _calendar.UpdateDayButtons();
-            _timePickerPresenter?.SyncTime(SelectedDate?.TimeOfDay);
-        }
-
-        SetCurrentValue(IsDropdownOpenProperty, true);
     }
 
     private bool _fromText = false;
@@ -210,6 +199,60 @@ public class DateTimePicker : DatePickerBase
             }
         }
         else
+        {
+            CommitInput(!fromText);
+        }
+        _fromText = temp;
+    }
+
+    private void OnTextBoxGetFocus(object? sender, GotFocusEventArgs e)
+    {
+        if (_calendar is not null)
+        {
+            var date = SelectedDate ?? DateTime.Today;
+            _calendar.ContextDate = _calendar.ContextDate.With(date.Year, date.Month);
+            _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);
+        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))
@@ -227,33 +270,11 @@ public class DateTimePicker : DatePickerBase
         else
         {
             SetCurrentValue(SelectedDateProperty, null);
-                if (!fromText) _textBox?.SetValue(TextBox.TextProperty, null);
+            if (clearWhenInvalid) _textBox?.SetValue(TextBox.TextProperty, null);
             _calendar?.ClearSelection();
             _timePickerPresenter?.SyncTime(null);
         }
     }
-        _fromText = temp;
-    }
-
-    private void OnTextBoxGetFocus(object? sender, GotFocusEventArgs e)
-    {
-        if (_calendar is not null)
-        {
-            var date = SelectedDate ?? DateTime.Today;
-            _calendar.ContextDate = _calendar.ContextDate.With(date.Year, date.Month);
-            _calendar.UpdateDayButtons();
-            _timePickerPresenter?.SyncTime(date.TimeOfDay);
-        }
-
-        SetCurrentValue(IsDropdownOpenProperty, true);
-    }
-
-    protected override void OnLostFocus(RoutedEventArgs e)
-    {
-        base.OnLostFocus(e);
-        // SetCurrentValue(IsDropdownOpenProperty, false);
-        SetSelectedDate();
-    }
 
 
     protected override void OnKeyDown(KeyEventArgs e)
@@ -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);
     }
 

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,
+            CommitInput(false);
-                    out var time))
-                _presenter?.SyncTime(time.TimeOfDay);
         }
     }
 
@@ -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);
+        }
+    }
 }

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;
@@ -17,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";
@@ -45,31 +47,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));
+        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);
-        }
     }
 
 
@@ -100,10 +93,18 @@ public class TimeRangePicker : TimePickerBase, IClearControl
     public void Clear()
     {
         Focus(NavigationMethod.Pointer);
+        SetCurrentValue(StartTimeProperty, null);
+        SetCurrentValue(EndTimeProperty, null);
         _startPresenter?.SyncTime(null);
         _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);
@@ -122,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)
@@ -133,12 +134,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,10 +147,9 @@ 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);
@@ -157,23 +157,61 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         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 +239,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 +263,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);
+            }
+        }
+    }
 }

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);
     }