feat: implement date range picker.

This commit is contained in:
rabbitism
2024-06-20 18:19:10 +08:00
parent e6b23312ba
commit b531b48157
7 changed files with 454 additions and 20 deletions

View File

@@ -40,6 +40,9 @@
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
Watermark="{TemplateBinding Watermark}"
InnerLeftContent="{TemplateBinding InnerLeftContent}"
InnerRightContent="{TemplateBinding InnerRightContent}"
CornerRadius="{TemplateBinding CornerRadius}"
Foreground="{TemplateBinding Foreground}"
Theme="{DynamicResource LooklessTextBox}"

View File

@@ -0,0 +1,147 @@
<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:DateRangePicker}" TargetType="u:DateRangePicker">
<Setter Property="Background" Value="{DynamicResource TextBoxDefaultBackground}" />
<Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
<Setter Property="MinHeight" Value="32" />
<Setter Property="Template">
<ControlTemplate TargetType="u:DateRangePicker">
<DataValidationErrors>
<Panel
Name="LayoutRoot"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border
Name="Background"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" />
<Grid ColumnDefinitions="*, Auto, * Auto">
<TextBox
Name="{x:Static u:DateRangePicker.PART_StartTextBox}"
Grid.Column="0"
MinHeight="{TemplateBinding MinHeight}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
BorderThickness="1"
CornerRadius="3 0 0 3"
Foreground="{TemplateBinding Foreground}"
InnerLeftContent="{TemplateBinding InnerLeftContent}"
IsReadOnly="{TemplateBinding IsReadonly}" />
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
Text="~" />
<TextBox
Name="{x:Static u:DateRangePicker.PART_EndTextBox}"
Grid.Column="2"
MinHeight="{TemplateBinding MinHeight}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
CornerRadius="0"
Foreground="{TemplateBinding Foreground}"
InnerRightContent="{TemplateBinding InnerRightContent}"
IsReadOnly="{TemplateBinding IsReadonly}" />
<Button
Name="ClearButton"
Grid.Column="3"
Padding="8,0"
Command="{Binding $parent[contracts:IClearControl].Clear}"
Content="{DynamicResource IconButtonClearData}"
Focusable="False"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
<Button
Name="{x:Static u:DateRangePicker.PART_Button}"
Grid.Column="3"
Padding="8,0"
Content="{DynamicResource TimePickerIconGlyph}"
Focusable="False"
Theme="{DynamicResource InnerIconButton}" />
</Grid>
<Popup
Name="{x:Static contracts:PartNames.PART_Popup}"
IsLightDismissEnabled="True"
IsOpen="{TemplateBinding IsDropdownOpen,
Mode=TwoWay}"
Placement="BottomEdgeAlignedLeft"
PlacementTarget="Background">
<Border
Margin="0,4"
Padding="8"
HorizontalAlignment="Stretch"
Background="{DynamicResource ComboBoxPopupBackground}"
BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
ClipToBounds="True"
CornerRadius="6">
<Grid ColumnDefinitions="*, *">
<u:CalendarView
Name="{x:Static u:DateRangePicker.PART_StartCalendar}"
Grid.Column="0"
Margin="8"
BorderThickness="0"
CornerRadius="{Binding $parent[Border].CornerRadius}"
FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" />
<u:CalendarView
Name="{x:Static u:DateRangePicker.PART_EndCalendar}"
Grid.Column="1"
Margin="8"
BorderThickness="0"
CornerRadius="{Binding $parent[Border].CornerRadius}"
FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" />
</Grid>
</Border>
</Popup>
</Panel>
</DataValidationErrors>
</ControlTemplate>
</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>
</Style>
<!-- Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource CalendarDatePickerDisabledBackground}" />
</Style>
<Style Selector="^ /template/ Button#PART_Button">
<Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerDisabledIconForeground}" />
</Style>
<Style Selector="^ /template/ TextBox#PART_TextBox">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
</Style>
<!-- Focused State -->
<Style Selector="^ /template/ Border#Background:focus">
<Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
</Style>
<Style Selector="^ /template/ Border#Background:focus-within">
<Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@@ -9,6 +9,7 @@
<ResourceInclude Source="ControlClassesInput.axaml" />
<ResourceInclude Source="Clock.axaml" />
<ResourceInclude Source="DatePicker.axaml" />
<ResourceInclude Source="DateRangePicker.axaml" />
<ResourceInclude Source="Dialog.axaml" />
<ResourceInclude Source="DialogShared.axaml" />
<ResourceInclude Source="DisableContainer.axaml" />

View File

@@ -140,7 +140,6 @@ public class CalendarView : TemplatedControl
InitializeGridButtons();
UpdateDayButtons();
UpdateYearButtons();
UpdateHeaderButtons();
}
private void OnFastNext(object sender, RoutedEventArgs e)
@@ -150,8 +149,6 @@ public class CalendarView : TemplatedControl
ContextCalendar.Year += 1;
UpdateDayButtons();
}
UpdateHeaderButtons();
}
private void OnNext(object sender, RoutedEventArgs e)
@@ -184,8 +181,6 @@ public class CalendarView : TemplatedControl
ContextCalendar.EndYear += 100;
UpdateYearButtons();
}
UpdateHeaderButtons();
}
private void OnPrevious(object sender, RoutedEventArgs e)
@@ -218,8 +213,6 @@ public class CalendarView : TemplatedControl
ContextCalendar.EndYear -= 100;
UpdateYearButtons();
}
UpdateHeaderButtons();
}
private void OnFastPrevious(object sender, RoutedEventArgs e)
@@ -229,8 +222,6 @@ public class CalendarView : TemplatedControl
ContextCalendar.Year -= 1;
UpdateDayButtons();
}
UpdateHeaderButtons();
}
/// <summary>
@@ -248,7 +239,6 @@ public class CalendarView : TemplatedControl
var range = DateTimeHelper.GetDecadeViewRangeByYear(ContextCalendar.Year!.Value);
ContextCalendar.StartYear = range.start;
ContextCalendar.EndYear = range.end;
UpdateHeaderButtons();
UpdateYearButtons();
return;
}
@@ -259,7 +249,6 @@ public class CalendarView : TemplatedControl
var range = DateTimeHelper.GetCenturyViewRangeByYear(ContextCalendar.StartYear!.Value);
ContextCalendar.StartYear = range.start;
ContextCalendar.EndYear = range.end;
UpdateHeaderButtons();
UpdateYearButtons();
return;
}
@@ -314,7 +303,7 @@ public class CalendarView : TemplatedControl
}
}
private void UpdateDayButtons()
internal void UpdateDayButtons()
{
if (_monthGrid is null || Mode != CalendarViewMode.Month) return;
var children = _monthGrid.Children;
@@ -335,6 +324,7 @@ public class CalendarView : TemplatedControl
FadeOutDayButtons();
MarkDates(_start, _end, _previewStart, _previewEnd);
UpdateHeaderButtons();
}
private void UpdateYearButtons()
@@ -374,6 +364,7 @@ public class CalendarView : TemplatedControl
child?.SetContext(CalendarViewMode.Year, new CalendarContext { Month = i });
}
}
UpdateHeaderButtons();
}
private void FadeOutDayButtons()
@@ -412,7 +403,7 @@ public class CalendarView : TemplatedControl
private void OnCellDatePreviewed(object sender, CalendarDayButtonEventArgs e)
{
OnDatePreviewed?.Invoke(sender, e);
OnDatePreviewed?.Invoke(this, e);
}
private void OnCellDateSelected(object sender, CalendarDayButtonEventArgs e)
@@ -423,10 +414,9 @@ public class CalendarView : TemplatedControl
ContextCalendar.Year = e.Date.Year;
ContextCalendar.Day = 1;
UpdateDayButtons();
UpdateHeaderButtons();
}
OnDateSelected?.Invoke(sender, e);
OnDateSelected?.Invoke(this, e);
}
/// <summary>
@@ -437,7 +427,6 @@ public class CalendarView : TemplatedControl
private void OnHeaderMonthButtonClick(object sender, RoutedEventArgs e)
{
SetCurrentValue(ModeProperty, CalendarViewMode.Year);
UpdateHeaderButtons();
UpdateYearButtons();
}
@@ -453,7 +442,6 @@ public class CalendarView : TemplatedControl
var range = DateTimeHelper.GetDecadeViewRangeByYear(ContextCalendar.Year!.Value);
ContextCalendar.StartYear = range.start;
ContextCalendar.EndYear = range.end;
UpdateHeaderButtons();
UpdateYearButtons();
}

View File

@@ -34,6 +34,15 @@ public class DatePicker: DatePickerBase, IClearControl
set => SetValue(SelectedDateProperty, value);
}
public static readonly StyledProperty<string?> WatermarkProperty = AvaloniaProperty.Register<DatePicker, string?>(
nameof(Watermark));
public string? Watermark
{
get => GetValue(WatermarkProperty);
set => SetValue(WatermarkProperty, value);
}
static DatePicker()
{
SelectedDateProperty.Changed.AddClassHandler<DatePicker, DateTime?>((picker, args) =>
@@ -86,6 +95,7 @@ public class DatePicker: DatePickerBase, IClearControl
private void OnDateSelected(object sender, CalendarDayButtonEventArgs e)
{
SetCurrentValue(SelectedDateProperty, e.Date);
SetCurrentValue(IsDropdownOpenProperty, false);
}
private void OnButtonClick(object sender, RoutedEventArgs e)
@@ -96,6 +106,12 @@ public class DatePicker: DatePickerBase, IClearControl
private void OnTextBoxPointerPressed(object sender, PointerPressedEventArgs e)
{
if (_calendar is not null)
{
var date = SelectedDate ?? DateTime.Today;
_calendar.ContextCalendar = new CalendarContext(date.Year, date.Month, 1);
_calendar.UpdateDayButtons();
}
SetCurrentValue(IsDropdownOpenProperty, true);
}
@@ -120,6 +136,12 @@ public class DatePicker: DatePickerBase, IClearControl
out var date))
{
SetCurrentValue(SelectedDateProperty, date);
if (_calendar is not null)
{
var d = SelectedDate ?? DateTime.Today;
_calendar.ContextCalendar = new CalendarContext(date.Year, date.Month, 1);
_calendar.UpdateDayButtons();
}
_calendar?.MarkDates(startDate: date, endDate: date);
}
}
@@ -127,7 +149,13 @@ public class DatePicker: DatePickerBase, IClearControl
private void OnTextBoxGetFocus(object sender, GotFocusEventArgs e)
{
SetCurrentValue(IsDropdownOpenProperty, true);
if (_calendar is not null)
{
var date = SelectedDate ?? DateTime.Today;
_calendar.ContextCalendar = new CalendarContext(date.Year, date.Month, 1);
_calendar.UpdateDayButtons();
}
SetCurrentValue(IsDropdownOpenProperty, true);
}
protected override void OnKeyDown(KeyEventArgs e)

View File

@@ -1,8 +1,275 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Primitives;
using Avalonia.Input;
using Avalonia.Interactivity;
using Irihi.Avalonia.Shared.Helpers;
namespace Ursa.Controls;
public class DateRangePicker : TemplatedControl
[TemplatePart(PART_Button, typeof(Button))]
[TemplatePart(PART_Popup, typeof(Popup))]
[TemplatePart(PART_StartCalendar, typeof(CalendarView))]
[TemplatePart(PART_EndCalendar, typeof(CalendarView))]
[TemplatePart(PART_StartTextBox, typeof(TextBox))]
[TemplatePart(PART_EndTextBox, typeof(TextBox))]
public class DateRangePicker : DatePickerBase
{
public const string PART_Button = "PART_Button";
public const string PART_Popup = "PART_Popup";
public const string PART_StartCalendar = "PART_StartCalendar";
public const string PART_EndCalendar = "PART_EndCalendar";
public const string PART_StartTextBox = "PART_StartTextBox";
public const string PART_EndTextBox = "PART_EndTextBox";
public static readonly StyledProperty<DateTime?> SelectedStartDateProperty =
AvaloniaProperty.Register<DateRangePicker, DateTime?>(
nameof(SelectedStartDate));
public static readonly StyledProperty<DateTime?> SelectedEndDateProperty =
AvaloniaProperty.Register<DateRangePicker, DateTime?>(
nameof(SelectedEndDate));
private Button? _button;
private CalendarView? _endCalendar;
private TextBox? _endTextBox;
private Popup? _popup;
private CalendarView? _startCalendar;
private TextBox? _startTextBox;
static DateRangePicker()
{
SelectedStartDateProperty.Changed.AddClassHandler<DateRangePicker, DateTime?>((picker, args) =>
picker.OnSelectionChanged(args));
SelectedEndDateProperty.Changed.AddClassHandler<DateRangePicker, DateTime?>((picker, args) =>
picker.OnSelectionChanged(args));
}
public DateTime? SelectedStartDate
{
get => GetValue(SelectedStartDateProperty);
set => SetValue(SelectedStartDateProperty, value);
}
public DateTime? SelectedEndDate
{
get => GetValue(SelectedEndDateProperty);
set => SetValue(SelectedEndDateProperty, value);
}
private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<DateTime?> args)
{
if (args.Property == SelectedStartDateProperty)
{
if (args.NewValue.Value is null)
{
_startCalendar?.ClearSelection();
_startTextBox?.Clear();
}
else
{
_startCalendar?.MarkDates(args.NewValue.Value, args.NewValue.Value);
_startTextBox?.SetValue(TextBox.TextProperty,
args.NewValue.Value.Value.ToString(DisplayFormat ?? "yyyy-MM-dd"));
}
}
else if (args.Property == SelectedEndDateProperty)
{
if (args.NewValue.Value is null)
{
_endCalendar?.ClearSelection();
_endTextBox?.Clear();
}
else
{
_endCalendar?.MarkDates(args.NewValue.Value, args.NewValue.Value);
_endTextBox?.SetValue(TextBox.TextProperty,
args.NewValue.Value.Value.ToString(DisplayFormat ?? "yyyy-MM-dd"));
}
}
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
GotFocusEvent.RemoveHandler(OnTextBoxGetFocus, _startTextBox);
TextBox.TextChangedEvent.RemoveHandler(OnTextChanged, _startTextBox, _endTextBox);
PointerPressedEvent.RemoveHandler(OnTextBoxPointerPressed, _startTextBox, _endTextBox);
Button.ClickEvent.RemoveHandler(OnButtonClick, _button);
if (_startCalendar != null)
{
_startCalendar.OnDateSelected -= OnDateSelected;
_startCalendar.OnDatePreviewed -= OnDatePreviewed;
}
if (_endCalendar != null)
{
_endCalendar.OnDateSelected -= OnDateSelected;
_endCalendar.OnDatePreviewed -= OnDatePreviewed;
}
_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.Tunnel, true, _button);
GotFocusEvent.AddHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
TextBox.TextChangedEvent.AddHandler(OnTextChanged, _startTextBox, _endTextBox);
PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _startTextBox, _endTextBox);
if (_startCalendar != null)
{
_startCalendar.OnDateSelected += OnDateSelected;
_startCalendar.OnDatePreviewed += OnDatePreviewed;
}
if (_endCalendar != null)
{
_endCalendar.OnDateSelected += OnDateSelected;
_endCalendar.OnDatePreviewed += OnDatePreviewed;
}
}
private DateTime? _previewStart;
private DateTime? _previewEnd;
private bool? _start;
private void OnDatePreviewed(object sender, CalendarDayButtonEventArgs e)
{
if (_start == true)
{
_previewStart = e.Date;
_startCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
_endCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
}
else if(_start == false)
{
_previewEnd = e.Date;
_startCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
_endCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
}
}
private void OnDateSelected(object sender, CalendarDayButtonEventArgs e)
{
if (_start == true)
{
if (SelectedEndDate < e.Date)
{
// Select a start date that is out of current range, so clear selection.
// _startCalendar?.ClearSelection();
// _endCalendar?.ClearSelection();
SelectedStartDate = null;
SelectedEndDate = null;
}
SetCurrentValue(SelectedStartDateProperty, e.Date);
_startTextBox?.SetValue(TextBox.TextProperty, e.Date.ToString(DisplayFormat ?? "yyyy-MM-dd"));
_start = false;
_previewStart = null;
_previewEnd = null;
_startCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
_endCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
_endTextBox?.Focus();
}
else if(_start == false)
{
if (SelectedStartDate > e.Date)
{
// Select a start date that is out of current range, so clear selection.
// _startCalendar?.ClearSelection();
// _endCalendar?.ClearSelection();
SelectedStartDate = null;
SelectedEndDate = null;
}
SetCurrentValue(SelectedEndDateProperty, e.Date);
_endTextBox?.SetValue(TextBox.TextProperty, e.Date.ToString(DisplayFormat ?? "yyyy-MM-dd"));
_start = null;
_previewStart = null;
_previewEnd = null;
_startCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
_endCalendar?.MarkDates(SelectedStartDate, SelectedEndDate, _previewStart, _previewEnd);
SetCurrentValue(IsDropdownOpenProperty, false);
}
}
private void OnButtonClick(object sender, RoutedEventArgs e)
{
Focus(NavigationMethod.Pointer);
SetCurrentValue(IsDropdownOpenProperty, !IsDropdownOpen);
_start = true;
}
private void OnTextBoxPointerPressed(object sender, PointerPressedEventArgs e)
{
if (sender == _startTextBox)
{
_start = true;
if (_startCalendar is not null)
{
var date = SelectedStartDate ?? DateTime.Today;
_startCalendar.ContextCalendar = new CalendarContext(date.Year, date.Month, 1);
_startCalendar.UpdateDayButtons();
}
if (_endCalendar is not null)
{
var date2 = SelectedStartDate ?? SelectedEndDate ?? DateTime.Today;
date2 = SelectedStartDate is null ? date2 : date2.AddMonths(1);
_endCalendar.ContextCalendar = new CalendarContext(date2.Year, date2.Month, 1);
_endCalendar.UpdateDayButtons();
}
}
else if (sender == _endTextBox)
{
_start = false;
if (_startCalendar is not null)
{
var date2 = SelectedEndDate ?? DateTime.Today;
date2 = date2.AddMonths(-1);
_startCalendar.ContextCalendar = new CalendarContext(date2.Year, date2.Month, 1);
_startCalendar.UpdateDayButtons();
}
if (_endCalendar is not null)
{
var date = SelectedEndDate ?? DateTime.Today;
_endCalendar.ContextCalendar = new CalendarContext(date.Year, date.Month, 1);
_endCalendar.UpdateDayButtons();
}
}
SetCurrentValue(IsDropdownOpenProperty, true);
}
private void OnTextChanged(object sender, TextChangedEventArgs e)
{
//throw new NotImplementedException();
}
private void OnTextBoxGetFocus(object sender, GotFocusEventArgs e)
{
if (_startCalendar is not null)
{
var date = SelectedStartDate ?? DateTime.Today;
_startCalendar.ContextCalendar = new CalendarContext(date.Year, date.Month, 1);
_startCalendar.UpdateDayButtons();
}
if (_endCalendar is not null)
{
var date2 = SelectedStartDate ?? DateTime.Today;
date2 = date2.AddMonths(1);
_endCalendar.ContextCalendar = new CalendarContext(date2.Year, date2.Month, 1);
_endCalendar.UpdateDayButtons();
}
SetCurrentValue(IsDropdownOpenProperty, true);
}
protected override void OnLostFocus(RoutedEventArgs e)
{
//base.OnLostFocus(e);
//SetCurrentValue(IsDropdownOpenProperty, false);
//_start = null;
}
}