diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 4797598f78..028eca3ade 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -2693,6 +2693,16 @@ Fired when the display month changes. + + + Command executed when the user double-clicks on the date picker. + + + + + Gets or sets a value which will be set when double-clicking on the text field of date picker. + + diff --git a/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor b/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor index 3c7bcbd349..335d141a07 100644 --- a/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor +++ b/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor @@ -1,19 +1,32 @@ -
-
+

+ +

+
+
-
- +
+
-
- +
+
- +
-

Selected Date: @(SelectedValue?.ToString("yyyy-MM-dd"))

+

+ Selected Date: @(SelectedValue?.ToString("yyyy-MM-dd")) +

+ @code { private DateTime? SelectedValue = DateTime.Today.AddDays(-2); + private DateTime? DoubleClickToDate = null; + + private bool DoubleClickToToday + { + get => DoubleClickToDate.HasValue; + set => DoubleClickToDate = value ? DateTime.Today : null; + } } diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor b/src/Core/Components/DateTime/FluentDatePicker.razor index 6c660da8b9..b21fa51717 100644 --- a/src/Core/Components/DateTime/FluentDatePicker.razor +++ b/src/Core/Components/DateTime/FluentDatePicker.razor @@ -11,6 +11,7 @@ Appearance="@Appearance" @bind-Value="@CurrentValueAsString" @onclick="@OnCalendarOpenHandlerAsync" + @ondblclick="@OnDoubleClickHandlerAsync" ReadOnly="@ReadOnly" Disabled="@Disabled" Required="@Required" diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor.cs b/src/Core/Components/DateTime/FluentDatePicker.razor.cs index 7989246f8d..bc348149d4 100644 --- a/src/Core/Components/DateTime/FluentDatePicker.razor.cs +++ b/src/Core/Components/DateTime/FluentDatePicker.razor.cs @@ -50,6 +50,18 @@ protected override string? ClassValue [Parameter] public virtual EventCallback PickerMonthChanged { get; set; } + /// + /// Command executed when the user double-clicks on the date picker. + /// + [Parameter] + public EventCallback OnDoubleClick { get; set; } + + /// + /// Gets or sets a value which will be set when double-clicking on the text field of date picker. + /// + [Parameter] + public DateTime? DoubleClickToDate { get; set; } + public bool Opened { get; set; } = false; protected override string? FormatValueAsString(DateTime? value) @@ -91,6 +103,22 @@ protected async Task OnSelectedDateAsync(DateTime? value) await OnSelectedDateHandlerAsync(updatedValue); } + protected async Task OnDoubleClickHandlerAsync(MouseEventArgs e) + { + if (!ReadOnly) + { + if (DoubleClickToDate.HasValue) + { + await OnSelectedDateAsync(DoubleClickToDate.Value); + } + + if (OnDoubleClick.HasDelegate) + { + await OnDoubleClick.InvokeAsync(e); + } + } + } + protected override bool TryParseValueFromString(string? value, out DateTime? result, [NotNullWhen(false)] out string? validationErrorMessage) { if (View == CalendarViews.Years && int.TryParse(value, out var year)) diff --git a/tests/Core/DateTime/FluentDatePickerTests.cs b/tests/Core/DateTime/FluentDatePickerTests.cs index ea96edbaf8..e0790e1c9f 100644 --- a/tests/Core/DateTime/FluentDatePickerTests.cs +++ b/tests/Core/DateTime/FluentDatePickerTests.cs @@ -225,4 +225,65 @@ public void FluentDatePicker_ChangeValueWhenDefaultIsNull() // Assert Assert.Equal(System.DateTime.Parse("2022-03-12"), picker.Instance.Value); } + + [Theory] + [InlineData(null)] + [InlineData("2024-06-05")] + public void FluentDatePicker_DoubleClickToSetDateInTextField(string plainDateTime) + { + // Arrange + using var ctx = new TestContext(); + ctx.JSInterop.Mode = JSRuntimeMode.Loose; + ctx.Services.AddSingleton(LibraryConfiguration); + System.DateTime? dt = string.IsNullOrEmpty(plainDateTime) ? null : System.DateTime.Parse(plainDateTime); + + // Act + var picker = ctx.RenderComponent(parameters => + { + parameters.Add(p => p.DoubleClickToDate, dt); + }); + + var textField = picker.Find("fluent-text-field"); + + // Double-Click + textField.DoubleClick(); + + // Assert + Assert.False(picker.Instance.Opened); + + if (dt.HasValue) + { + Assert.Equal(dt.Value, picker.Instance.Value); + } + else + { + Assert.Null(picker.Instance.Value); + } + } + + [Fact] + public void FluentDatePicker_OnDoubleClickEventTriggers() + { + // Arrange + using var ctx = new TestContext(); + ctx.JSInterop.Mode = JSRuntimeMode.Loose; + ctx.Services.AddSingleton(LibraryConfiguration); + var expected = "EventWorks"; + + // Act + var actual = string.Empty; + + var picker = ctx.RenderComponent(parameters => + { + parameters.Add(p => p.OnDoubleClick, e => actual = expected); + }); + + var textField = picker.Find("fluent-text-field"); + + // Double-Click + textField.DoubleClick(); + + // Assert + Assert.Equal(expected, actual); + } }